From d81b99fd7d13a798f2b48830cd7bf6e1e21ce937 Mon Sep 17 00:00:00 2001
From: minom <minomdu@gmail.com>
Date: Thu, 12 Mar 2026 11:22:28 +0800
Subject: [PATCH] 1

---
 web/admin/item/TabletDesigner.aspx | 187 +++++++++++------------------
 1 file changed, 70 insertions(+), 117 deletions(-)

diff --git a/web/admin/item/TabletDesigner.aspx b/web/admin/item/TabletDesigner.aspx
index e64d405..609d66c 100644
--- a/web/admin/item/TabletDesigner.aspx
+++ b/web/admin/item/TabletDesigner.aspx
@@ -3,8 +3,6 @@
 <%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
 
 <asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
-  
 </asp:Content>
 
 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
@@ -28,23 +26,23 @@
                 </select>
                 <label for="paperSize" style="color: black">尺寸</label>
             </div>
-            <div id="sizeDiv" style="display:none;">
-            <div class="form-floating mb-3">
-                <input type="text" class="form-control form-select-sm mb-2 " id="paperName" />
+            <div id="sizeDiv" style="display: none;">
+                <div class="form-floating mb-3">
+                    <input type="text" class="form-control form-select-sm mb-2 " id="paperName" />
 
-                <label for="paperName" style="color: black">名稱</label>
-            </div>
-           
-            <div class="form-floating mb-3">
-                <input type="text" class="form-control form-select-sm mb-2 " id="paperWidth" />
+                    <label for="paperName" style="color: black">名稱</label>
+                </div>
 
-                <label for="paperWidth" style="color: black">寬度</label>
-            </div>
-            <div class="form-floating mb-3">
-                <input type="text" class="form-control form-select-sm mb-2 " id="paperHeight" />
+                <div class="form-floating mb-3">
+                    <input type="text" class="form-control form-select-sm mb-2 " id="paperWidth" />
 
-                <label for="paperHeight" style="color: black">高度</label>
-            </div>
+                    <label for="paperWidth" style="color: black">寬度</label>
+                </div>
+                <div class="form-floating mb-3">
+                    <input type="text" class="form-control form-select-sm mb-2 " id="paperHeight" />
+
+                    <label for="paperHeight" style="color: black">高度</label>
+                </div>
                 <div class="row">
                     <span class="btn btn-info" onclick="Designer.savePaperSize()">儲存</span>
                 </div>
@@ -52,14 +50,26 @@
             <div id="paperOrientation" onclick="Designer.changeOrientation()" class="mb-2">
                 <span></span>
             </div>
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('address')">地址欄</span>
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('title1')">牌位正名</span>
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('lefttitle')">左正名</span>
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('righttitle')">右正名</span>
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('titletriangle')">品字名單</span>
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('combined')">雙姓合併置中</span>
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('tricombined')">三姓合併置中</span>
-            <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('alive')">陽上報恩</span>
+            <div>
+                <ul class="navbar-nav">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">顯示物件
+          </a>
+                        <ul class="dropdown-menu">
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('address')">地址欄</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('title1')">牌位正名</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('lefttitle')">左正名</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('righttitle')">右正名</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('titletriangle')">品字名單</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('combined')">雙姓合併置中</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('tricombined')">三姓合併置中</span></li>
+                            <li><span class="btn btn-sm btn-outline-light w-100 mb-2 dropdown-item" onclick="Designer.displayItem('alive')">陽上報恩</span></li>
+
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+
             <div class="form-floating mb-3">
                 <%--   <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.clickBackend()">
                     <i class="bi bi-upload me-1"></i>上傳自訂底圖 (PNG/JPG)
@@ -95,17 +105,17 @@
                     <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.saveStyle()">存檔</span>
                 </div>
                 <div class="col-6">
-                   <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.print()">預覽列印</span>
+                    <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.print()">預覽列印</span>
                 </div>
             </div>
         </div>
-        <div id="printArea" style="width:100vw;height:100vh">
-        <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-column align-items-center position-relative" id="canvas">
-            <div class="tablet-paper">
-                <%--<div class="tablet-element vertical-text">嘿嘿</div>--%>
+        <div id="printArea" style="width: 100vw; height: 100vh">
+            <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-column align-items-center position-relative" id="canvas">
+                <div class="tablet-paper">
+                    <%--<div class="tablet-element vertical-text">嘿嘿</div>--%>
+                </div>
             </div>
         </div>
-       </div>
         <div id="attr-box" class="d-none p-2 bg-dark text-whit  floting-box" style="top: 80px; right: 20px">
             <div class="form-floating mb-3">
                 <textarea id="inp-text" class="form-control form-control-sm mb-2" rows="5"></textarea>
@@ -196,37 +206,6 @@
 </asp:Content>
 
 <asp:Content ID="Content4" ContentPlaceHolderID="footer_script" runat="Server">
-    <%-- <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      <div class="modal-header">
-     
-                    <h5 class="modal-title">紙張尺寸設定</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <div class="row">
-                        <div class="col-12">
-                            <input type="text" id="PaperName" />
-                        </div>
-                        <div class="col-12">
-                            <input type="text" id="PaperWidth" />
-                        </div>
-                        <div class="col-12">
-                            <input type="text" id="PaperHeight" />
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary">Save</button>
-                </div>
-            </div>
-        </div>
-    </div>--%>
-
-    <%--      <script src="../../js/jquery-4.0.0.min.js"></script>
-    <script src="jquery-ui/jquery-ui.js"></script>--%>
     <script>
         const Designer = {
             elements: [],
@@ -235,10 +214,6 @@
             paper: { width: "100", height: "272" },
             rosterLimit: 8,
             allSize: [
-                //{ name: "A3", width: 297, height: 420, selected: "" },
-                //{ name: "A4", width: 210, height: 297, selected: "" },
-                //{ name: "B4", width: 257, height: 364, selected: "" },
-                //{ name: "red", width: 100, height: 272, selected: "selected" },
             ],
             bg: [
                 { name: "黃1", path: "../../admin/print/html/tablet-1.svg" },
@@ -257,7 +232,6 @@
                 this.getElements();
                 this.getStyles();
                 this.bindEvents();
-                //this.loadConfig();
                 this.bindBackend();
 
                 this.bg.forEach(x => {
@@ -265,44 +239,9 @@
                 });
                 $("#paperOrientation").html("<span>直向</span>")
             },
-            exportPDF() {
-        
-                    // 1. 抓取您要轉成 PDF 的目標區塊 (這裡我們抓取整張牌位)
-                    // 注意：如果有分頁，您可能需要抓取包住所有 .tablet-paper 的外層容器
-                    const element = document.querySelector('.tablet-paper');
-
-                    // 如果畫面上有隱藏的滾動條或超出邊界的元素，可以先把它們推到最左上角
-                    // 確保截圖時不會被切到
-                    window.scrollTo(0, 0);
-
-                    // 2. 設定 PDF 參數
-                    const opt = {
-                        margin: 0,
-                        filename: '牌位設計.pdf',
-                        // 設定截圖的品質
-                        image: { type: 'jpeg', quality: 1 },
-                        // scale: 2 可以讓截圖解析度變高，印出來的文字不會糊糊的
-                        // useCORS: true 確保您的 SVG 底圖可以被正確讀取，不會因為跨域問題破圖
-                        html2canvas: { scale: 2, useCORS: true, logging: false },
-                        // 將 PDF 尺寸設定為您系統中的動態寬高
-                        jsPDF: {
-                            unit: 'mm',
-                            format: [this.paper.width, this.paper.height],
-                            orientation: 'portrait'
-                        }
-                    };
-
-                    // 3. 呼叫 html2pdf 執行轉換並下載
-                    html2pdf().set(opt).from(element).save().then(() => {
-                        console.log("PDF 匯出成功！");
-                    }).catch(err => {
-                        console.error("PDF 匯出失敗：", err);
-                    });
-                
-            },
             print() {
                 let s = this.allStyle.find(x => x.styleID == this.styleID)
-                let size = this.allSize.find(x=>x.id=s.paperSize)
+                let size = this.allSize.find(x => x.id = s.paperSize)
                 let w = window.open('', '_blank');
                 if (!w) {
                     alert("請允許瀏覽器開啟彈出式視窗！");
@@ -474,7 +413,7 @@
                 $("#paperSize").append("<option value='newsize' >新增尺寸</option>")
                 this.allSize.forEach(x => {
                     $("#paperSize").append("<option value='" + x.id + "'>" + x.name + "(" + x.width + "*" + x.height + ")</option>")
-                    $("#printSize").append("<option value='" + x.id + "'>" + x.name+"("+x.width + "*" + x.height + ")</option>");
+                    $("#printSize").append("<option value='" + x.id + "'>" + x.name + "(" + x.width + "*" + x.height + ")</option>");
                 })
             },
             async getElements() {
@@ -553,8 +492,8 @@
                 let img = this.bg.find(x => x.name == s.backendImg);
                 $(".tablet-paper").css({
                     'background-image': 'url(' + (img ? img.path : "") + ')', 'background-size': '100% 100%',
-                    width: (size?size.width:self.paper.width) + "mm",
-                    height: (size?size.height:self.paper.height) + "mm",
+                    width: (size ? size.width : self.paper.width) + "mm",
+                    height: (size ? size.height : self.paper.height) + "mm",
                 })
                 await axios
                     .post(HTTP_HOST + 'api/tablet/GetStyleDetailData', { styleID: id })
@@ -610,14 +549,14 @@
                 let paperSize = $("#paperSize").val()
                 let self = this;
                 if (paperSize == "newsize") {
-                    $("#sizeDiv").attr("style","display:");
+                    $("#sizeDiv").attr("style", "display:");
                 } else {
-                    console.log("paperSize:",paperSize);
+                    console.log("paperSize:", paperSize);
                     let size = this.allSize.find(x => x.id == paperSize)
                     $(".tablet-paper").css({
                         "background-color": "white",
-                        width: (size?size.width:self.paper.width) + "mm",
-                        height: (size?size.height:self.paper.height) + "mm",
+                        width: (size ? size.width : self.paper.width) + "mm",
+                        height: (size ? size.height : self.paper.height) + "mm",
                     });
                 }
             },
@@ -675,8 +614,8 @@
                 const names = roster ? roster.text.split('\n').filter(s => s.trim()) : [];
                 const pages = Math.max(1, Math.ceil(names.length / this.rosterLimit));
                 let style = this.allStyle.find(x => x.styleID == this.styleID);
-                let size = this.allSize.find(x=>x.id==style.paperSize);
-                console.log(this.paper,size);
+                let size = this.allSize.find(x => x.id == style.paperSize);
+                console.log(this.paper, size);
                 //for (let p = 0; p < pages; p++) {
                 //    const $paper = $('<div class="tablet-paper"></div>')
                 //        .css({ "background-color": "red", width: this.paper.width + 'mm', height: this.paper.height + 'mm' });
@@ -780,10 +719,24 @@
                 const bot = names.slice(mid);
                 const size = this.autoScale(names, el.fontSize);
 
-                let h = `<div class="roster-container" style="gap:${el.style.itemSpacing || 20}px">`;
-                h += `<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
-                if (bot.length) h += `<div class="name-group">${bot.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
-                return h + `</div>`;
+                let h = $(`<div class="roster-container"></div>`).css(
+                    {
+                        width: "100%", height: "600px",
+                        "writing-mode": "vertical-rl", /* 直書 */
+                        display: "flex",
+                        "flex-direction": "row",     /* 上下分層 (Top / Bottom) */
+                        "align-items": "center",    /* 左右置中對齊 */
+                        "justify-content": "center",
+                        gap: "20px",
+                    });
+                h.append(
+                    $(`<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`)
+                )
+                if (bot.length) h.append(`<div class="name-group">${bot.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`)
+                //h += `<div class="name-group">${top.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
+                ///if (bot.length) h += `<div class="name-group">${bot.map(n => `<div class="roster-name" style="font-size:${size}pt">${n}</div>`).join('')}</div>`;
+                //return h + `</div>`;
+                return h.html()
             },
 
             autoScale(names, base) {
@@ -950,7 +903,7 @@
                 let detail = [
 
                 ];
-             
+
                 this.elements.forEach((el) => {
                     detail.push({
                         elementID: el.id, startX: el.x.toString(), startY: el.y.toString(), fontSize: el.style.fontSize, fontFamily: el.style.fontFamily,
@@ -960,7 +913,7 @@
                 });
                 let sID = this.styleID
                 if (sID == "20260310100234") {
-                    this.styleID=""
+                    this.styleID = ""
                 }
                 let master = {
                     styleID: this.styleID, styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),