From 095b3101094a009175e28f8c8f5b0eeb347e54c3 Mon Sep 17 00:00:00 2001
From: minom <minomdu@gmail.com>
Date: Fri, 13 Mar 2026 17:59:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=92=E7=89=88=E5=8A=9F=E8=83=BD=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/App_Code/DataAccess/StyleDataAccess.cs |   4 +-
 web/App_Code/api/designerController.cs     |   1 +
 web/admin/item/TabletDesigner.aspx         | 107 +++++++++++++++++++--
 3 files changed, 101 insertions(+), 11 deletions(-)

diff --git a/web/App_Code/DataAccess/StyleDataAccess.cs b/web/App_Code/DataAccess/StyleDataAccess.cs
index 9386dfe..bebe65a 100644
--- a/web/App_Code/DataAccess/StyleDataAccess.cs
+++ b/web/App_Code/DataAccess/StyleDataAccess.cs
@@ -298,7 +298,7 @@ public class StyleDataAccess
                 sb.Append("CUser=@CUser,CDate=@CDate,CTime=@CTime,UUser=@UUSer,UDate=@UDate,UTime=@UTime ");
                 sb.Append("where StyleID=@StyleID ");
 
-                context.Database.ExecuteSqlCommand(sb.ToString(), sp);
+                context.Database.ExecuteSqlCommand(sb.ToString(), sp.ToArray());
 
                 sb.Clear();
                 sb.Append("update TabletStyleDetail set Descr=@Descr,StartX=@StartX,StartY=@StartY,FontSize=@FontSize,BreakLen=@BreakLen,");
@@ -336,7 +336,7 @@ public class StyleDataAccess
                 new SqlParameter("@UDate",""),
                 new SqlParameter("@UTime",""),
             };
-                    context.Database.ExecuteSqlCommand(sb.ToString(), sp1);
+                    context.Database.ExecuteSqlCommand(sb.ToString(), sp1.ToArray());
                 }
             }
         }
diff --git a/web/App_Code/api/designerController.cs b/web/App_Code/api/designerController.cs
index e9893d6..98fb8fd 100644
--- a/web/App_Code/api/designerController.cs
+++ b/web/App_Code/api/designerController.cs
@@ -162,6 +162,7 @@ public class designerController : ApiController
         ts.Orientation = (json == null || json.orientation == null) ? "" : (string)json.orientation;
         ts.PrintPageCount = (json == null || json.printPageCount == null) ? "" : (string)json.printPageCount;
         ts.PrintMode = (json == null || json.printMode == null) ? "" : (string)json.printMode;
+        ts.RosterLimit = (json == null || json.rosterLimit == null) ? "" : (string)json.rosterLimit;
         foreach (var item in json.detail.Children<JObject>())
         {
             TabletStyleDetail tsd = new TabletStyleDetail();
diff --git a/web/admin/item/TabletDesigner.aspx b/web/admin/item/TabletDesigner.aspx
index e3b1b7c..371d201 100644
--- a/web/admin/item/TabletDesigner.aspx
+++ b/web/admin/item/TabletDesigner.aspx
@@ -272,10 +272,98 @@
                        
           
                         <style>
+                        
+                    /* 名單金字塔佈局容器 */
+                    .roster-container {
+                      width: 100%; height: 100%;
+                      writing-mode: vertical-rl; /* 直書 */
+                      display: flex;
+                      /*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
+                      flex-direction: row;     /* 上下分層 (Top / Bottom) */
+                      align-items: center;    /* 左右置中對齊 */
+                      justify-content: center;
+                      gap: 20px;               /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
+                    }
+
+                    .roster-row {
+                      display: flex;
+                      flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
+                      justify-content: center;
+                      gap: 8px; /* 名字之間的間距 */
+                      margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
+                    }
+
+                    .name-group {
+                      display: flex;
+                      flex-direction: column;  /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
+                      justify-content: center;
+                      align-items: center;
+                      /* gap 由 HTML 動態綁定 */
+                    }
+
+                    .roster-name {
+                      text-orientation: upright;
+                     /*font-weight: bold;*/
+                      white-space: nowrap;
+                      line-height: 1.2;
+                      font-family: 'Kaiti', serif;
+                      /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
+                      width: fit-content;
+                    }   
+                    .vertical-text {
+                        writing-mode: vertical-rl !important;
+                        -webkit-writing-mode: vertical-rl !important;
+                        text-orientation: mixed !important;
+                    }
+
+                    /* 【修復底圖沒出現】強制印出背景設定 */
+                    * {
+                        -webkit-print-color-adjust: exact !important;
+                        print-color-adjust: exact !important;
+                        color-adjust: exact !important;
+                    }
 
 
+                    /* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
+                    .tablet-paper {
+                        position: relative !important;
+                        margin: 0 auto !important;
+                        page-break-after: always !important;
+                        box-shadow: none !important;
+                        width: var(--page-w);
+                        height: var(--page-h);
+                    }
 
-                            /* 列印時的紙張大小與頁面歸零 */
+                    .tablet-element {
+                        position: absolute !important; /* 絕對不能被 Bootstrap 覆蓋為 static */
+                        color: black !important; /* 確保文字是黑色的 */
+                }
+
+
+                 .ancestor-wrapper {
+                    /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
+                    writing-mode: horizontal-tb;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center; /* 水平置中 */
+                    justify-content: center;
+                    width: fit-content;
+                }
+
+                .main-name {
+                    line-height: 1.2;
+                    /* 保持大字 */
+                }
+
+                .sub-text {
+                    font-size: 0.6em; /* 縮小字體 */
+                    line-height: 1.2;
+                    margin-top: 4px; /* 與上方林張的間距 */
+                    white-space: nowrap; /* 避免自動換行 */
+                    writing-mode:vertical-rl
+                }
+
+                /* 列印時的紙張大小與頁面歸零 */
                             @media print {
                                 @page {
                                     /* 動態套用您設定的紙張寬高 */
@@ -692,10 +780,11 @@
                 const top = names.slice(0, mid);
                 const bot = names.slice(mid);
                 const size = this.autoScale(names, el.fontSize);
+                
 
                 let h = $(`<div class=""></div>`).css(
                     {
-                        width: "100%", height: "600px",
+                        width: el.width, height: el.height,
                         "writing-mode": "vertical-rl", /* 直書 */
                         display: "flex",
                         "flex-direction": "row",     /* 上下分層 (Top / Bottom) */
@@ -710,19 +799,19 @@
                 //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>`;
-                h.append(this.renderNameGroups(top));
-                if (bot.length) h.append(this.renderNameGroups(bot));
+                h.append(this.renderNameGroups(top,el));
+                if (bot.length) h.append(this.renderNameGroups(bot,el));
                 return h
             },
-            renderNameGroups(items) {
+            renderNameGroups(items,el) {
                 let g = $(`<div ></div>`).css({
                     "display": "flex",
                     "flex-direction": "column",
                     "justify-content": "center",
-                    "height": "200px",
+                    "height": el.textHeight,
                 })
                 items.forEach(x => {
-                    g.append($(`<div class="" style="font-size:20pt;letter-spacing: 10px;">${x}</div>`))
+                    g.append($(`<div class="" style="font-size:${el.style.fontSize}pt;letter-spacing: 10px;">${x}</div>`))
                 })
                 return g;
             },
@@ -904,13 +993,13 @@
                     });
                 });
                 let sID = this.styleID
-                if (sID == "A0000") {
+                if (sID == "000001") {
                     this.styleID = ""
                 }
                 let master = {
                     styleID: this.styleID, styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),
                     backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(),
-                    orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), rosterLimit: $("rosterLimit").val(),
+                    orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), rosterLimit: $("#rosterLimit").val(),
                     detail: detail
                 }
                 console.log(master);