From f92fa65133a0d2e619b0398e23ff4cb4c943c861 Mon Sep 17 00:00:00 2001
From: minom <minomdu@gmail.com>
Date: Thu, 12 Mar 2026 17:44:08 +0800
Subject: [PATCH] go

---
 web/App_Code/DataAccess/StyleDataAccess.cs |   8 +-
 web/App_Code/Entity/Style.cs               |   1 +
 web/App_Code/api/designerController.cs     |   1 +
 web/admin/item/TabletDesigner.aspx         | 194 ++++++++++-----------
 4 files changed, 100 insertions(+), 104 deletions(-)

diff --git a/web/App_Code/DataAccess/StyleDataAccess.cs b/web/App_Code/DataAccess/StyleDataAccess.cs
index 10a0647..9386dfe 100644
--- a/web/App_Code/DataAccess/StyleDataAccess.cs
+++ b/web/App_Code/DataAccess/StyleDataAccess.cs
@@ -207,6 +207,7 @@ public class StyleDataAccess
                 new SqlParameter("@PrintMode",ts.PrintMode),
                 new SqlParameter("@Orientation",ts.Orientation),
                 new SqlParameter("@PrintPageCount",ts.PrintPageCount),
+                new SqlParameter("@RosterLimit",ts.RosterLimit),
                 new SqlParameter("@CUser",""),
                 new SqlParameter("@CDate",""),
                 new SqlParameter("@CTime",""),
@@ -215,9 +216,9 @@ public class StyleDataAccess
                 new SqlParameter("@UTime",""),
             };
 
-                sb.Append("insert into TabletStyle (StyleID,Name,Descr,PaperSize,BackendImg,PrintSize,PrintMode,Orientation,PrintPageCount");
+                sb.Append("insert into TabletStyle (StyleID,Name,Descr,PaperSize,BackendImg,PrintSize,PrintMode,Orientation,PrintPageCount,RosterLimit");
                 sb.Append(",CUser,CDate,CTime,UUser,UDate,UTime ) ");
-                sb.Append("values(@StyleID,@Name,@Descr,@PaperSize,@BackendImg,@PrintSize,@PrintMode,@Orientation,@PrintPageCount");
+                sb.Append("values(@StyleID,@Name,@Descr,@PaperSize,@BackendImg,@PrintSize,@PrintMode,@Orientation,@PrintPageCount,@RosterLimit");
                 sb.Append(",@CUser,@CDate,@CTime,@UUser,@UDate,@UTime ) ");
                 context.Database.ExecuteSqlCommand(sb.ToString(), sp);
 
@@ -283,6 +284,7 @@ public class StyleDataAccess
                 new SqlParameter("@PrintMode",ts.PrintMode),
                 new SqlParameter("@Orientation",ts.Orientation),
                 new SqlParameter("@PrintPageCount",ts.PrintPageCount),
+                new SqlParameter("@RosterLimit",ts.RosterLimit),
                 new SqlParameter("@CUser",""),
                 new SqlParameter("@CDate",""),
                 new SqlParameter("@CTime",""),
@@ -292,7 +294,7 @@ public class StyleDataAccess
             };
 
                 sb.Append("update TabletStyle set Descr=@Descr,PaperSize=@PaperSize,BackendImg=@BackendImg,PrintSize=@PrintSize,");
-                sb.Append("PrintMode=@PrintMode,Orientation=@Orientation,PrintPageCount=@PrintPageCount,");
+                sb.Append("PrintMode=@PrintMode,Orientation=@Orientation,PrintPageCount=@PrintPageCount,RosterLimit=@RosterLimit,");
                 sb.Append("CUser=@CUser,CDate=@CDate,CTime=@CTime,UUser=@UUSer,UDate=@UDate,UTime=@UTime ");
                 sb.Append("where StyleID=@StyleID ");
 
diff --git a/web/App_Code/Entity/Style.cs b/web/App_Code/Entity/Style.cs
index f7afe2a..f75d688 100644
--- a/web/App_Code/Entity/Style.cs
+++ b/web/App_Code/Entity/Style.cs
@@ -24,6 +24,7 @@ public class TabletStyle
     public string PrintMode { get; set; }
     public string Orientation { get; set; }
     public string PrintPageCount { get; set; }
+    public string RosterLimit { get; set; }
     public string CUser { get; set; }
     public string CDate { get; set; }
     public string CTime { get; set; }
diff --git a/web/App_Code/api/designerController.cs b/web/App_Code/api/designerController.cs
index 7124df8..e9893d6 100644
--- a/web/App_Code/api/designerController.cs
+++ b/web/App_Code/api/designerController.cs
@@ -105,6 +105,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 609d66c..e3b1b7c 100644
--- a/web/admin/item/TabletDesigner.aspx
+++ b/web/admin/item/TabletDesigner.aspx
@@ -7,7 +7,7 @@
 
 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
 
-    <div class="d-flex overflow-hidden">
+    <div class="d-flex overflow-hidden" style="height:1920px">
         <div class="p-2 bg-dark text-white floting-box" style="width: 250px; left: 20px; top: 80px;">
             <h6 class="border-bottom pb-2">設計工具箱</h6>
             <div class="input-group mb-3">
@@ -15,7 +15,7 @@
                     data-bs-toggle="dropdown" aria-expanded="false">
                     版型</button>
                 <ul class="dropdown-menu style-menu">
-                    <li><span class="dropdown-item" data-value="">選擇版型</span></li>
+                    <%--<li><span class="dropdown-item" data-value="">選擇版型</span></li>--%>
                 </ul>
                 <input type="text" id="styleName" class="form-control" aria-label="版型名稱">
             </div>
@@ -96,6 +96,10 @@
                 </select>
                 <label for="printMode" style="color: black">列印模式</label>
             </div>
+             <div class="form-floating mb-3">
+                 <input type="number" id="rosterLimit" onchange="Designer.changeRosterLimit()" class="form-control form-control-sm mb-2">
+                 <label class="small" for="rosterLimit" style="color: black;">正名上限</label>
+             </div>
             <div class="form-floating mb-3">
                 <input type="number" id="perpage" class="form-control form-control-sm mb-2">
                 <label class="small" for="perpage" style="color: black;">每頁列印筆數</label>
@@ -212,7 +216,7 @@
             activeId: null,
             styleID: null,
             paper: { width: "100", height: "272" },
-            rosterLimit: 8,
+            rosterLimit: 10,
             allSize: [
             ],
             bg: [
@@ -270,77 +274,6 @@
                         <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;
-}
-
-
-                            /* =======================================
-                               暴力防護層：避免外部 CSS 載入失敗或被干擾
-                               ======================================= */
-                   
-                            /* 【修復直書變橫書】強制寫入直書屬性 */
-                            .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; /* 確保文字是黑色的 */
-                            }
 
                             /* 列印時的紙張大小與頁面歸零 */
                             @media print {
@@ -482,13 +415,15 @@
                 let obj = this.elements
                 let s = this.allStyle.find(x => x.styleID == id)
                 let size = this.allSize.find(x => x.id == s.paperSize)
-                this.paper.width = size.width
-                this.paper.height = size.height
+                this.paper.width = size.width;
+                this.paper.height = size.height;
+                this.rosterLimit = s.rosterLimit;
                 $("#paperSize").val(s.paperSize);
                 $("#backendInp").val(s.backendImg);
                 $("#printSize").val(s.printSize);
                 $("#printMode").val(s.printMode);
-                $("#perPage").val(s.printPageCount);
+                $("#perpage").val(s.printPageCount);
+                $("#rosterLimit").val(s.rosterLimit);
                 let img = this.bg.find(x => x.name == s.backendImg);
                 $(".tablet-paper").css({
                     'background-image': 'url(' + (img ? img.path : "") + ')', 'background-size': '100% 100%',
@@ -575,11 +510,15 @@
                     });
 
             },
+            changeRosterLimit() {
+                this.rosterLimit = parseInt($("#rosterLimit").val());
+            },
             changePrintMode() {
 
             },
             bindEvents() {
                 // 文字變更連動渲染
+                //$('#rosterLimit').on('input', (e) =>this.)
                 $('#inp-text').on('input', (e) => this.updateActive('text', $(e.target).val()));
                 $('#inp-size').on('input', (e) => this.updateActive('fontSize', $(e.target).val()));
                 $('#width').on('input', (e) => this.updateActive('width', $(e.target).val()))
@@ -628,7 +567,6 @@
                 //const slice = names.slice(p * this.rosterLimit, (p + 1) * this.rosterLimit);
                 const slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
                 this.elements.forEach(el => {
-                    console.log("shit:", el);
                     $paper.append(this.createEl(el, slice));
                 });
                 //$canvas.append($paper);
@@ -660,12 +598,14 @@
                 }
                 else if (el.id === 'title1') {
                     html = this.renderNameList(slice, el);
-                    console.log(html);
+                }
+                else if (el.id === 'alive') {
+                    html = this.renderLiveList(slice, el);
                 }
                 else {
                     html = el.text;
                 }
-                console.log("QQ:", el);
+              
                 return $(`<div class="tablet-element vertical-text ${this.activeId === el.id ? 'selected' : ''}" id="${el.id}"></div>`)
                     .css({
                         position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
@@ -690,7 +630,6 @@
                     "row-gap": "1px",
                     "align-items": "center",
                 });
-                console.log("nameList:", $namelist)
                 let self = this;
                 names.forEach(n => {
                     $namelist.append(self.renderNameSpan(n, el))
@@ -710,7 +649,42 @@
                     "text-justify": "inter-character",
                 });
             },
-
+            renderLiveList(names, el) {
+                let $namelist = $(`<div class='liveList'></div>`).css({
+                    "writing-mode": "vertical rl",
+                    display: "flex",
+                    "flex-direction": "row",
+                    "flex-wrap": "wrap",
+                    margin: "auto",
+                    width: `${el.width}px`,
+                    height: `${el.height}px`,
+                    border: "0px solid #ccc",
+                    padding: "1px",
+                    "font-family": "BiauKai",
+                    "letter-spacing": "0.1em",
+                    "column-gap": "1px",
+                    "row-gap": "1px",
+                    "align-items": "center",
+                });
+                let self = this;
+                names.forEach(n => {
+                    $namelist.append(self.renderLiveSpan(n, el))
+                })
+                return $namelist;
+            },
+            renderLiveSpan(name, el) {
+                return $(`<span>${name}</span>`).css({
+                    display: "block",
+                    "min-height": `${el.textHeight}px`,
+                    "max-height": `${el.height}px`,
+                    width: `${el.textWidth}px`,
+                    "text-align": "justify",
+                    "text-align-last": "justify",
+                    "margin-bottom": "15px",
+                    "margin-left": "5px",
+                    "text-justify": "inter-character",
+                });
+            },
             // 品字佈局邏輯：一上二下
             renderRoster(names, el) {
                 if (!names.length) return '';
@@ -719,24 +693,38 @@
                 const bot = names.slice(mid);
                 const size = this.autoScale(names, el.fontSize);
 
-                let h = $(`<div class="roster-container"></div>`).css(
+                let h = $(`<div class=""></div>`).css(
                     {
                         width: "100%", height: "600px",
                         "writing-mode": "vertical-rl", /* 直書 */
                         display: "flex",
                         "flex-direction": "row",     /* 上下分層 (Top / Bottom) */
                         "align-items": "center",    /* 左右置中對齊 */
-                        "justify-content": "center",
+                        "justify-content": "start",
                         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.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()
+                h.append(this.renderNameGroups(top));
+                if (bot.length) h.append(this.renderNameGroups(bot));
+                return h
+            },
+            renderNameGroups(items) {
+                let g = $(`<div ></div>`).css({
+                    "display": "flex",
+                    "flex-direction": "column",
+                    "justify-content": "center",
+                    "height": "200px",
+                })
+                items.forEach(x => {
+                    g.append($(`<div class="" style="font-size:20pt;letter-spacing: 10px;">${x}</div>`))
+                })
+                return g;
             },
 
             autoScale(names, base) {
@@ -787,17 +775,19 @@
             updateActive(key, val) {
                 const el = this.elements.find(x => x.id === this.activeId);
 
-                if (key === 'fontSize') el.fontSize = parseFloat(val);
+                if (key === 'fontSize') el.style.fontSize = parseFloat(val);
                 else if (key === 'width') el.width = parseFloat(val);
                 else if (key === 'breakLen') el.breakLen = parseInt(val);
                 else if (key === '2offset') el.twoOffset = parseFloat(val);
                 else if (key === '3offset') el.threeOffset = parseFloat(val);
                 else if (key === '4offset') el.fourOffset = parseFloat(val);
                 else el[key] = val;
+                console.log("activeId:",this.activeId)
                 if (el.type == "roster") {
                     const names = el.text.split('\n').filter(s => s.trim());
+
                     $(`.tablet-element[id="${this.activeId}"]`).css({
-                        position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
+                        position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
                     }).html(this.renderRoster(names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit), el));
                 } else if (el.type == "combined-center") {
                     const parts = el.text.split('\n');
@@ -806,20 +796,22 @@
                                 <span class="sub-text">${parts[1] || ''}</span>
                             </div>`;
                     $(`.tablet-element[id="${this.activeId}"]`).css({
-                        position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
+                        position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.style.isActive
                     }).html(html);
                 } else if (this.activeId === "title1") {
-                    let slice = el.text.split('\n').filter(s => s.trim());
-                    //html = "<div class='name-list'>";
-                    //console.log(slice);
-                    //slice.forEach(x => {
-                    //    html = html + "<span>" + x + "</span>"
-                    //});
-                    //html = html + "</div>";
+                    let names = el.text.split('\n').filter(s => s.trim());
+                    let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
                     html = this.renderNameList(slice, el);
                     $(`.tablet-element[id="${this.activeId}"]`).css({
                         position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
                     }).html(html);
+                } else if (this.activeId === "alive") {
+                    let names = el.text.split('\n').filter(s => s.trim());
+                    let slice = names.slice(0 * this.rosterLimit, (0 + 1) * this.rosterLimit);
+                    html = this.renderLiveList(slice, el);
+                    $(`.tablet-element[id="${this.activeId}"]`).css({
+                        position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
+                    }).html(html);
                 } else {
                     $(`.tablet-element[id="${this.activeId}"]`).css({
                         position: "absolute", left: el.x + "mm", top: el.y + "mm", fontSize: el.style.fontSize + 'pt', fontFamily: el.style.fontFamily, "z-index": 9999, visibility: el.style.visibility
@@ -912,13 +904,13 @@
                     });
                 });
                 let sID = this.styleID
-                if (sID == "20260310100234") {
+                if (sID == "A0000") {
                     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(),
+                    orientation: $("#paperOrientation").val(), printPageCount: $("#perpage").val(), rosterLimit: $("rosterLimit").val(),
                     detail: detail
                 }
                 console.log(master);