diff --git a/web/App_Code/api/FollowerController.cs b/web/App_Code/api/FollowerController.cs
index 0237f1c..c754524 100644
--- a/web/App_Code/api/FollowerController.cs
+++ b/web/App_Code/api/FollowerController.cs
@@ -1287,12 +1287,19 @@ public class FollowerController : ApiController
         if (q.num>0)
         {//表示要更新
             var qry = _db.followers_tablet_template.AsQueryable();
-
+            qry = qry.Where(x => x.num == q.num);
+            var d=qry.FirstOrDefault();
+            d.name = q.name;
+            d.style_id = q.style_id;
+            d.shuwen = q.shuwen;
+            d.tablet = q.tablet;
         }
         else
         {
-
+            _db.followers_tablet_template.Add(q);
         }
+        _db.SaveChanges();
+
         return Ok();
     }
 }
diff --git a/web/App_Code/api/familyMembersController.cs b/web/App_Code/api/familyMembersController.cs
index c464721..ab92dd7 100644
--- a/web/App_Code/api/familyMembersController.cs
+++ b/web/App_Code/api/familyMembersController.cs
@@ -94,7 +94,8 @@ public class familyMembersController : ApiController
             return Ok(familyMember);
         }
 
-        // GET api/familymembers/follower/5
+    // GET api/familymembers/follower/5
+        [HttpGet]
         [Route("api/familymembers/follower/{followerId}")]
         public IHttpActionResult GetByFollower(int followerId)
         {
diff --git a/web/App_Code/api/shuwensController.cs b/web/App_Code/api/shuwensController.cs
index dd2921d..d677f32 100644
--- a/web/App_Code/api/shuwensController.cs
+++ b/web/App_Code/api/shuwensController.cs
@@ -37,7 +37,9 @@ public class shuwensController: BaseApiController
                 x.act_num,
                 x.shuwen_type,
                 x.shuwen_num,
-                x.contents
+                x.contents,
+                x.paper_size,
+                x.direction
             }).FirstOrDefault()
         });
     }
@@ -78,4 +80,55 @@ public class shuwensController: BaseApiController
             }).ToList()
         });
     }
+
+    [HttpPost]
+    [Route("api/shuwens/SaveActShuwen")]
+    public IHttpActionResult SaveActShuwen([FromBody] Model.activity_shuwen s)
+    {
+        var qry = _db.activity_shuwen.AsQueryable();
+        qry=qry.Where(x => x.act_num == s.act_num && x.shuwen_type == s.shuwen_type);
+        var d=qry.FirstOrDefault();
+        if (d != null)
+        {
+            d.contents = s.contents;
+            d.direction = s.direction;
+            d.paper_size = s.paper_size;
+            d.reg_time=DateTime.Now;
+        }
+        else
+        {
+            s.reg_time = DateTime.Now;
+            _db.activity_shuwen.Add(s);
+        }
+
+        _db.SaveChanges();
+            return Ok();
+    }
+
+    [HttpPost]
+    [Route("api/shuwens/SaveAsShuwenTemplate")]
+    public IHttpActionResult SaveAsShuwenTemplate([FromBody] Model.shuwen_temp t)
+    {
+        if (t.num > 0)
+        {//跑更新
+            var qry=_db.shuwen_temp.AsQueryable();
+            qry = qry.Where(x => x.num == t.num);
+            var d=qry.FirstOrDefault();
+            if (d != null)
+            {
+                d.contents = t.contents;
+                d.name = t.name;
+                d.reg_time = DateTime.Now;
+            }
+        }
+        else
+        {
+            t.reg_time=DateTime.Now;
+            _db.shuwen_temp.Add(t);
+        }
+        _db.SaveChanges();
+
+            return Ok();
+    }
+
 }
\ No newline at end of file
diff --git a/web/admin/activity/shuwen02.vue b/web/admin/activity/shuwen02.vue
index 47384fd..d27c222 100644
--- a/web/admin/activity/shuwen02.vue
+++ b/web/admin/activity/shuwen02.vue
@@ -51,7 +51,7 @@
                              max="80"
                              v-model.number="globalMargin"
                              @input="applyGlobalMargin" />
-                      <button @click.event="adjustAllMargins(1)">+</button>
+                      <button @click.prevent="adjustAllMargins(1)">+</button>
                   </div>
               </div>
 
@@ -62,7 +62,10 @@
               <hr />
 
               <button class="action-btn save-btn" @click.prevent="saveData">
-                  1. 儲存至資料庫
+                  1. 儲存總疏文
+              </button>
+              <button class="action-btn save-btn" @click.prevent="saveAsTempData">
+                  1.1. 另存成範本
               </button>
               <button class="action-btn print-btn" @click.prevent="triggerPrint">
                   2. 產生 PDF / 列印
@@ -228,13 +231,45 @@ module.exports = {
     methods: {
         changeShuwenType() {
             console.log("changeShuwenType:", this.shuwenType)
+            // 防呆：如果切換回「請選擇」，就清空畫面
+            if (!this.shuwenType) {
+                this.clearContent();
+                this.defaultTemplate = "";
+                return;
+            }
             //去資料庫抓回他的消災或超薦的總疏文
             axios.post(HTTP_HOST + 'api/shuwens/GetActShuwen', { act_num: Number(this.num), shuwen_type: this.shuwenType })
                 .then(response => {
                     console.log(response)
                     if (response && response.data && response.data.data) {
-                        let shuwenContent = response.data.data.contents
-                        document.getElementById("editor").innerHTML = `${shuwenContent}`;
+                        let data = response.data.data;
+
+                        // 1. 帶入疏文內容
+                        if (data.contents) {
+                            document.getElementById("editor").innerHTML = data.contents;
+                        }
+
+                        // 2. 帶入紙張大小與方向 (對應 DB 欄位 paper_size 與 direction)
+                        if (data.paper_size) {
+                            this.paperSize = data.paper_size;
+                        }
+                        if (data.direction) {
+                            this.paperOrientation = data.direction;
+                        }
+
+                        // 3. 同步樣板下拉選單 (如果之前存檔有綁定樣板)
+                        if (data.shuwen_num) {
+                            this.defaultTemplate = data.shuwen_num;
+                        } else {
+                            this.defaultTemplate = "";
+                        }
+
+                        // 4. 呼叫更新 Layout，讓白紙區塊實際變形
+                        this.updateLayout();
+                    } else {
+                        // 如果該活動還沒有存過這個類型的總疏文，就給予預設空白
+                        this.clearContent();
+                        this.defaultTemplate = "";
                     }
 
                 })
@@ -352,19 +387,105 @@ module.exports = {
       this.globalMargin = newVal;
       this.applyGlobalMargin();
     },
+        saveAsTempData() {
+            // 1. 隱藏選單與取消選取狀態，避免將選取的樣式存進去
+            this.isMenuVisible = false;
+            if (this.currentTargetLine) {
+                this.currentTargetLine.classList.remove('selected-line');
+            }
 
-    saveData() {
-      this.isMenuVisible = false;
-      if (this.currentTargetLine) {
-        this.currentTargetLine.classList.remove('selected-line');
-        }
-        console.log(this.num, this.shuwenType, this.defaultTemplate);
-      const editor = this.$refs.editorRef;
-      if (editor) {
-        console.log(editor.innerHTML);
-        alert('已成功擷取 HTML 結構至 Console！');
-      }
-    },
+            // 2. 檢核：必須要有疏文類型
+            if (!this.shuwenType) {
+                alert("請先選擇【疏文類型】(消災/超薦)！");
+                return;
+            }
+
+            // 3. 取得範本名稱 (使用原生 prompt，您也可以後續在 UI 加上 input)
+            const templateName = prompt("請輸入新範本名稱：");
+            if (!templateName || templateName.trim() === "") {
+                return; // 使用者按取消或未輸入
+            }
+
+            // 4. 取得編輯器內的 HTML 內容
+            const editor = this.$refs.editorRef;
+            const htmlContent = editor ? editor.innerHTML : '';
+
+            // 5. 組合 API Payload (對應 dbo.shuwen_temp 資料表)
+            // 註：num 為 IDENTITY(1,1) 自動遞增，不需傳入
+            // 註：reg_time 通常由後端 DB 的 GETDATE() 或程式產生，此處不強制傳入
+            const payload = {
+                shuwen_type: this.shuwenType,
+                name: templateName.trim(),
+                contents: htmlContent
+            };
+
+            console.log('準備另存疏文範本:', payload);
+
+            // 6. 發送 API 請求 (請依據您的實際路由進行修改)
+            axios.post(HTTP_HOST + 'api/shuwens/SaveAsShuwenTemplate', payload)
+                .then(response => {
+                    if (response.status==200) {
+                        alert('另存範本成功！');
+                        // 重新抓取範本清單，讓下拉選單即時更新
+                        this.initData();
+                    } else {
+                        alert('存檔失敗');
+                    }
+                })
+                .catch(error => {
+                    console.error('另存範本發生錯誤:', error);
+                    alert('存檔發生錯誤');
+                });
+        },
+
+        saveData() {
+            // 1. 隱藏選單與取消選取狀態
+            this.isMenuVisible = false;
+            if (this.currentTargetLine) {
+                this.currentTargetLine.classList.remove('selected-line');
+            }
+
+            // 2. 檢核：確認活動編號與疏文類型
+            if (!this.num) {
+                alert("缺少活動編號 (act_num)，無法儲存！");
+                return;
+            }
+            if (!this.shuwenType) {
+                alert("請先選擇【疏文類型】(消災/超薦)！");
+                return;
+            }
+
+            // 3. 取得編輯器內的 HTML 內容
+            const editor = this.$refs.editorRef;
+            const htmlContent = editor ? editor.innerHTML : '';
+
+            // 4. 組合 API Payload (對應 dbo.activity_shuwen 資料表)
+            // 註：act_num 與 shuwen_type 為 PK 複合主鍵
+            const payload = {
+                act_num: Number(this.num),
+                shuwen_num: this.defaultTemplate ? Number(this.defaultTemplate) : null,
+                shuwen_type: this.shuwenType,
+                contents: htmlContent,
+                paper_size: this.paperSize,
+                direction: this.paperOrientation
+            };
+
+            console.log('準備儲存活動總疏文:', payload);
+
+            // 5. 發送 API 請求 (請依據您的實際路由進行修改)
+            axios.post(HTTP_HOST + 'api/shuwens/SaveActShuwen', payload)
+                .then(response => {
+                    if (response.status==200) {
+                        alert('總疏文儲存成功！');
+                    } else {
+                        alert('存檔失敗');
+                    }
+                })
+                .catch(error => {
+                    console.error('儲存活動疏文發生錯誤:', error);
+                    alert('存檔發生錯誤');
+                });
+        },
 
     triggerPrint() {
         //window.print();
diff --git a/web/admin/follower/tablet_template.html b/web/admin/follower/tablet_template.html
index 4e1da29..dd3ca96 100644
--- a/web/admin/follower/tablet_template.html
+++ b/web/admin/follower/tablet_template.html
@@ -59,7 +59,6 @@
             background-size: 100% 100%;
         }
 
-        /* 牌位外框視覺提示 */
         .tablet-element {
             cursor: pointer;
             border: 1px solid transparent;
@@ -84,10 +83,10 @@
             flex-direction: column;
             gap: 12px;
             width: 30vw;
-            height:80vh;
+            height: 80vh;
             left: 50px;
             top: 50px;
-            overflow:auto;
+            overflow: auto;
         }
 
             #line-floating-menu h4 {
@@ -215,7 +214,7 @@
             }
 
             #line-floating-menu {
-                display: none !important;
+                display:  !important;
             }
 
             #preview-container {
@@ -250,23 +249,23 @@
             }
         }
     </style>
-    <!-- 頂端控制列 (依據 editorNewOne_2.html) -->
+    <!-- 頂端控制列 -->
     <div class="row mt-2 no-print" style="padding: 0 24px; background: white; z-index: 10;">
         <div class="col-3">
             範本設定:
             <select id="templateSel" class="form-select">
                 <option value="">請選擇範本</option>
-                <!-- 這裡的選項可透過 API 動態載入 -->
             </select>
         </div>
         <div class="col-3">
             範本名稱:
             <input type="text" id="template_name_txt" class="form-control" placeholder="" />
         </div>
-        <div class="col-2">
-            <button class="btn btn-primary" id="btn_save">儲存牌位</button>
+        <div class="col-2 d-flex align-items-end gap-2">
+            <button class="btn btn-outline-secondary" id="btn_new_template">新增範本</button>
+            <button class="btn btn-primary" id="btn_save">儲存範本</button>
         </div>
-        <div class="col-5">
+        <div class="col-4">
             <div style="display: flex; align-items: center; padding: 8px; background-color: #f5f5f5; border-radius: 4px;">
                 <span style="margin-right: 8px; cursor:pointer;" id="zoomOut">➖</span>
                 <input type="range" id="scaleSlider" min="0.0" max="1.0" step="0.05" value="0.5" style="flex-grow: 1; cursor: pointer;">
@@ -277,14 +276,10 @@
     </div>
 
     <div class="print-preview-app">
-        <!-- 預覽容器 -->
         <div id="preview-container">
             <div id="paper-preview" style="transform: scale(0.5);">
                 <div class="dual-editor-wrapper">
-                    <!-- 右側編輯區 -->
-                    <div id="editor-right" class="editor">123</div>
-
-                    <!-- 左側編輯區 (動態產生內容) -->
+                    <div id="editor-right" class="editor"></div>
                     <div id="editor-left" class="editor printArea"></div>
                 </div>
             </div>
@@ -292,13 +287,11 @@
             <!-- 浮動設定面板 -->
             <div id="line-floating-menu" class="no-print" style="display: ;">
                 <h4 id="menu-header">✥ 拖拉此處移動面板</h4>
-                <!-- 🌟 新增：浮動選單內的版型選擇 -->
                 <div class="control-group">
                     <label>版型設定</label>
                     <div class="adjust-row">
                         <select class="styleSelector" style="width: 100%; padding: 6px; font-size: 13px; border: 1px solid #e2e8f0; border-radius: 6px; outline: none; background-color: #f8fafc;">
                             <option value="">請選擇版型</option>
-
                         </select>
                     </div>
                 </div>
@@ -317,7 +310,7 @@
                     <ul id="selectedItem" class="item-list"></ul>
                 </div>
 
-                <div class="control-group"  style="height:50%;">
+                <div class="control-group" style="height:50%;">
                     <label>可選</label>
                     <input type="text" id="filter_txt" placeholder="篩選條件..." style="padding:4px; font-size:12px;">
                     <ul id="canselectItem" class="item-list"></ul>
@@ -329,24 +322,19 @@
     <script>
         const designer = {
             zoomScale: 0.5,
-            tabletItem: {},
             familyMembers: [],
             allStyle: [],
-            allStyleDetails: [],
-            allSize: [],
-            tabletElement: [],
             papers: [],
-            elements:[],
-            http_host: "",
             follower_id: "",
-            follower_num:"",
+
             // 動態名單資料
             properTitle: [],
             leftProperTitle: [],
             rightProperTitle: [],
             alive: [],
             address: "",
-            currentTarget: "",
+            shuwenList: [],
+
             selectedElement: null,
             selectStyle: "",
             tabletTempNameList: [],
@@ -361,103 +349,96 @@
             ],
 
             async init() {
-                this.getTabletStyles();
+                this.follower_id = typeof VueApp !== 'undefined' ? VueApp.follower_id : "";
                 this.bindZoom();
                 this.bindFloatingMenu();
                 this.bindListEvents();
-                this.follower_id = VueApp.follower_id;
-                //console.log(this.follower_num,":",VueApp.follower_id);
-                this.getFamilies();
-                this.getTemplateNameList();
-            },
-            //抓親友資料
-            async getFamilies() {
-                await axios.post('/api/follower/GetFollowerFamilies', { num: VueApp.follower_id }).then(res => {
-                    if (res.status == 200 && res.data.list) {
-                        this.familyMembers = res.data.list;
-                    }
-                });
+
+                await Promise.all([
+                    this.getTabletStyles(),
+                    this.getFamilies(),
+                    this.getTemplateNameList(),
+                    this.getData()
+                ]);
             },
+
             // ================= 1. API 資料撈取 =================
-            //async getAllStyleDetails() {
-            //    await axios.post('/api/tablet/GetStyleDetailData', {}).then(res => {
-            //        if (res.status == 200 && res.data.result == "Y") this.allStyleDetails = res.data.data;
-            //    });
-            //},
-            //async getPaperSize() {
-            //    await axios.post('/api/tablet/GetPaperSize', {}).then(res => {
-            //        if (res.status == 200) this.allSize = res.data.data;
-            //    });
-            //},
-            //async getTabletElement() {
-            //    await axios.post('/api/tablet/GetTabletElement', {}).then(res => {
-            //        if (res.status == 200) this.tabletElement = res.data.data;
-            //    });
-            //},
+            async getFamilies() {
+                let res = await axios.post('/api/follower/GetFollowerFamilies', { num: this.follower_id });
+                if (res.status === 200 && res.data.list) this.familyMembers = res.data.list;
+            },
             async getTabletStyles() {
-                await axios.post('/api/tablet/GetTabletStyleList', {}).then(res => {
-                    if (res.status == 200 && res.data.list) {
-                        this.allStyle = [];
-                        // 🌟 改用 Class
-                        $('.styleSelector').empty().append('<option value="">請選擇版型</option>');
-                        res.data.list.forEach(x => {
-                            if (x.styleID !== "000001") {
-                                this.allStyle.push(x);
-                                // 🌟 改用 Class
-                                $('.styleSelector').append(`<option value="${x.styleID}">${x.name}</option>`);
-                            }
-                        });
-
-                        this.papers = res.data.papers;
-                        this.elements = res.data.elements;
-
-                       //console.log("getTabletStyles:",this.allStyle, this.papers, this.elements);
-                    }
-                });
+                let res = await axios.post('/api/tablet/GetTabletStyleList', {});
+                if (res.status === 200 && res.data.list) {
+                    this.allStyle = res.data.list.filter(x => x.styleID !== "000001");
+                    $('.styleSelector').empty().append('<option value="">請選擇版型</option>');
+                    this.allStyle.forEach(x => $('.styleSelector').append(`<option value="${x.styleID}">${x.name}</option>`));
+                    this.papers = res.data.papers || [];
+                }
             },
             async getData() {
                 this.properTitle = []; this.leftProperTitle = []; this.rightProperTitle = []; this.alive = [];
-                //let param = [{ order_no: this.tabletItem.order_no, num: this.tabletItem.num }];
+                // 參數建議統一為 num 或 follower_num，依您後端 API 實際定義為主
+                let res = await axios.post('/api/follower/GetTabletTemplateList', { num: this.follower_id });
 
-                await axios.post('/api/follower/GetTabletTemplateList', { follower_num:VueApp.follower_id}).then(res => {
-                    if (res.status == 200) {
-                        res.data.forEach(x => {
-                            if (x.style_id) {
-                                this.selectStyle = x.style_id;
-                                // 🌟 載入資料時同步兩邊的下拉選單
-                                $(".styleSelector").val(x.style_id);
-                            }
+                // 🌟 修正：確保 res.data.list 存在，再對其進行 forEach
+                if (res.status === 200 && res.data.list) {
+                    res.data.list.forEach(x => {
+                        if (x.style_id) {
+                            this.selectStyle = x.style_id;
+                            $(".styleSelector").val(x.style_id);
+                        }
+                        if (x.tablet) {
+                            let tablet = JSON.parse(x.tablet);
+                            if (tablet.mid_items) this.properTitle = tablet.mid_items;
+                            if (tablet.left_items) this.alive = tablet.left_items;
+                            if (tablet.mid_left) this.leftProperTitle = tablet.mid_left;
+                            if (tablet.mid_right) this.rightProperTitle = tablet.mid_right;
+                            this.address = tablet.addr_items || x.address || "";
+                        }
+                    });
+                    this.renderEditorLeft();
+                    this.renderEditorRight();
+                }
+            },
+            async getTemplateNameList() {
+                $("#templateSel").empty().append('<option value="">請選擇範本</option>');
+                this.tabletTempNameList = [];
+                let res = await axios.post('/api/follower/GetTabletTemplateList', { num: this.follower_id });
+                if (res.status === 200 && res.data.list) {
+                    this.tabletTempNameList = res.data.list;
+                    this.tabletTempNameList.forEach(x => $('#templateSel').append(`<option value="${x.num}">${x.name}</option>`));
+                }
+            },
 
-                            if (x.tablet) {
-                                let tablet = JSON.parse(x.tablet);
-                                if (tablet.mid_items) this.properTitle = tablet.mid_items;
-                                if (tablet.left_items) this.alive = tablet.left_items;
-                                if (tablet.mid_left) this.leftProperTitle = tablet.mid_left;
-                                if (tablet.mid_right) this.rightProperTitle = tablet.mid_right;
-                                this.address = tablet.addr_items || x.address || "";
-                            }
-                        });
-                        this.renderEditorLeft(); // 資料撈完後開始畫畫面
-                        this.renderEditorRight();
-                    }
-                });
-            },
-            async getTemplateNameList() {//抓範本名稱做下拉選項
-                $("#templateSel").empty().append('<option value="">請選擇範本</option>');;
-                this.tabletTempNameList.length = 0;
-                await axios.post('/api/follower/GetTabletTemplateNameList', { num: VueApp.follower_id }).then(res => {
-                    if (res.status == 200 && res.data.list) {
-                        this.tabletTempNameList = res.data.list;
-                        this.tabletTempNameList.forEach(x => {
-                            $('#templateSel').append(`<option value="${x.num}">${x.name}</option>`);
-                        });
-                    }
-                });
-            },
             // ================= 2. 動態渲染排版 =================
+            // 🌟 輔助函式：統一萃取名稱，避免重複寫 if-else
+            getExtractedNames(arr) {
+                if (!arr || arr.length === 0) return ["請選擇"];
+                return arr.map(x => typeof x === 'string' ? x : x.fam_name);
+            },
+
+            // 🌟 輔助函式：統一根據 elementID 產生對應 HTML，解決 renderEditorLeft 與 rerenderPart 的冗餘
+            generateElementHtml(d) {
+                let pTitleNames = this.getExtractedNames(this.properTitle);
+                let aliveNames = this.getExtractedNames(this.alive);
+                let leftNames = this.getExtractedNames(this.leftProperTitle);
+                let rightNames = this.getExtractedNames(this.rightProperTitle);
+                let addressStr = typeof this.address === 'string' ? this.address : (this.address ? this.address.fam_name : "");
+                if (!addressStr) addressStr = "請選擇";
+
+                if (d.elementID === 'title1') return this.buildNameList(pTitleNames, d);
+                if (d.elementID === 'titletriangle') return this.buildRosterList(pTitleNames, d);
+                if (d.elementID === 'combined' || d.elementID === 'tricombined') return this.buildCombinedList(pTitleNames, d);
+                if (d.elementID === 'alive') return this.buildLiveList(aliveNames, d);
+                if (d.elementID === 'lefttitle') return this.buildNormalWithSpace(leftNames, d, 'lefttitle');
+                if (d.elementID === 'righttitle') return this.buildNormalWithSpace(rightNames, d, 'righttitle');
+                if (d.elementID === 'address') return `<div class='address' style='width:${d.width}px; height:${d.height}px; font-size:${d.fontSize}px; font-family:${d.fontFamily};'>${addressStr}</div>`;
+                return "";
+            },
+
             renderEditorLeft() {
                 $('#editor-left').empty();
-
                 let style = this.allStyle.find(y => y.styleID == this.selectStyle);
                 if (!style) return;
 
@@ -465,45 +446,13 @@
                 let printSize = this.papers.find(y => y.paperID == style.printSize);
                 let img = this.bg.find(y => y.name == style.backendImg);
 
-                // 設定外框與底圖
-                $('#paper-preview').css({ width: (Number(printSize.width) * 2) + 'mm', height: (Number(printSize.height)+20) + 'mm' });
+                $('#paper-preview').css({ width: (Number(printSize.width) * 2) + 'mm', height: (Number(printSize.height) + 20) + 'mm' });
                 $('#editor-left').css({ width: Number(size.width) + 'mm', height: Number(size.height) + 'mm', backgroundImage: `url(${img.path})` });
-                // 🌟 3. 設定右側 (#editor-right) 的尺寸：寬度永遠鎖定 A4 橫向 (297mm)，高度跟著版型
-                $('#editor-right').css({
-                    width: '297mm',
-                    height: Number(size.height) + 'mm'
-                });
-                let details = style.details; //this.elements.filter(y => y.styleID == style.styleID);
-
-                // 依據版型設定動態產生內部區塊
-                // 依據版型設定動態產生內部區塊
-                details.forEach(d => {
-                    if (d.isActive != "hidden") {
-                        let html = "";
-                        let currentList = [];
-
-                        if (d.elementID === 'title1') {
-                            currentList = this.properTitle.length > 0 ? this.properTitle : ["請選擇"];
-                            html = this.buildNameList(currentList, d);
-                        } else if (d.elementID === 'titletriangle') { // 🌟 加入品字佈局
-                            currentList = this.properTitle.length > 0 ? this.properTitle : ["請選擇"];
-                            html = this.buildRosterList(currentList, d);
-                        } else if (d.elementID === 'combined' || d.elementID === 'tricombined') { // 🌟 加入合併佈局
-                            currentList = this.properTitle.length > 0 ? this.properTitle : ["請選擇"];
-                            html = this.buildCombinedList(currentList, d);
-                        } else if (d.elementID === 'alive') {
-                            currentList = this.alive.length > 0 ? this.alive : ["請選擇"];
-                            html = this.buildLiveList(currentList, d);
-                        } else if (d.elementID === 'lefttitle') {
-                            currentList = this.leftProperTitle.length > 0 ? this.leftProperTitle : ["請選擇"];
-                            html = this.buildNormalWithSpace(currentList, d, 'lefttitle');
-                        } else if (d.elementID === 'righttitle') {
-                            currentList = this.rightProperTitle.length > 0 ? this.rightProperTitle : ["請選擇"];
-                            html = this.buildNormalWithSpace(currentList, d, 'righttitle');
-                        } else if (d.elementID === 'address') {
-                            html = `<div class='address' style='width:${d.width}px; height:${d.height}px; font-size:${d.fontSize}px; font-family:${d.fontFamily};'>${this.address || "請選擇"}</div>`;
-                        }
+                $('#editor-right').css({ width: '297mm', height: Number(size.height) + 'mm' });
 
+                (style.details || []).forEach(d => {
+                    if (d.isActive !== "hidden") {
+                        let html = this.generateElementHtml(d);
                         if (html) {
                             let wrapper = $(`<div class="tablet-element vertical-text"></div>`).css({
                                 position: 'absolute', left: d.startX + 'mm', top: d.startY + 'mm',
@@ -515,7 +464,60 @@
                 });
             },
 
-            // 完美修正版正名演算
+            rerenderPart() {
+                if (!this.selectedElement) return;
+                let target = this.selectedElement.children().first();
+                let style = this.allStyle.find(y => y.styleID == this.selectStyle);
+                if (!style) return;
+
+                let d = (style.details || []).find(y => (
+                    (target.hasClass("nameList") && y.elementID == "title1") ||
+                    (target.hasClass("rosterList") && y.elementID == "titletriangle") ||
+                    (target.hasClass("ancestor-wrapper") && (y.elementID == "combined" || y.elementID == "tricombined")) ||
+                    (target.hasClass("liveList") && y.elementID == "alive") ||
+                    (target.hasClass("lefttitle") && y.elementID == "lefttitle") ||
+                    (target.hasClass("righttitle") && y.elementID == "righttitle") ||
+                    (target.hasClass("address") && y.elementID == "address")
+                ));
+                if (!d) return;
+
+                this.selectedElement.empty();
+                this.selectedElement.append(this.generateElementHtml(d));
+            },
+
+            renderEditorRight() {
+                let $editorRight = $('#editor-right').empty();
+                $editorRight.css({ "writing-mode": "vertical-rl", "text-orientation": "mixed", "padding": "40px 20px 20px 20px", "display": "block" });
+
+                this.shuwenList.forEach((name, idx) => {
+                    if (!name || name === "請選擇") return;
+                    let $div = $('<div></div>').css({
+                        "font-size": "16pt", "font-family": "DFKai-sb", "line-height": "1.2", "letter-spacing": "2px",
+                        "white-space": "pre-line", "margin-left": "25px", "position": "relative"
+                    }).text(name);
+
+                    let $controls = $(`
+                            <div class="no-print" style="position: absolute; top: -30px; left: 50%; transform: translateX(-50%); writing-mode: horizontal-tb; display: flex; gap: 4px; z-index: 10;">
+                                <button class="btn-shuwen-up" data-idx="${idx}" style="padding: 0 4px; font-size: 12px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #fff;" title="往右移">↑</button>
+                                <button class="btn-shuwen-down" data-idx="${idx}" style="padding: 0 4px; font-size: 12px; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #fff;" title="往左移">↓</button>
+                            </div>
+                        `);
+                    $div.append($controls);
+                    $editorRight.append($div);
+                });
+
+                $editorRight.off('click', '.btn-shuwen-up').on('click', '.btn-shuwen-up', (e) => {
+                    e.preventDefault(); let idx = $(e.currentTarget).data('idx');
+                    if (idx > 0) { [this.shuwenList[idx - 1], this.shuwenList[idx]] = [this.shuwenList[idx], this.shuwenList[idx - 1]]; this.renderEditorRight(); }
+                });
+
+                $editorRight.off('click', '.btn-shuwen-down').on('click', '.btn-shuwen-down', (e) => {
+                    e.preventDefault(); let idx = $(e.currentTarget).data('idx');
+                    if (idx < this.shuwenList.length - 1) { [this.shuwenList[idx], this.shuwenList[idx + 1]] = [this.shuwenList[idx + 1], this.shuwenList[idx]]; this.renderEditorRight(); }
+                });
+            },
+
+            // ================= 3. 排版引擎 =================
             buildNameList(names, d) {
                 let w = parseFloat(d.width), h = parseFloat(d.height), th = parseFloat(d.textHeight) || h;
                 let v_gap = parseFloat(d.textSpan) || 0, h_gap = 5;
@@ -523,13 +525,11 @@
                 let long_s = parseFloat(d.fontSize), short_s = parseFloat(d.fontSize);
 
                 let testNames = [...names];
-                if (testNames.length === 1 && testNames[0].includes("暨無始劫以來累世冤親債主")) {
-                    testNames[0] = testNames[0].split("暨")[0] + "暨";
-                }
+
+                if (h<500&&testNames.length === 1 && testNames[0].includes("暨無始劫以來累世冤親債主")) testNames[0] = testNames[0].split("暨")[0] + "暨";
 
                 let items = testNames.map((name, i) => {
-                    let l = name.length;
-                    let isShort = (testNames.length > 1) && ((l * 40) <= (th + (v_gap / 2)));
+                    let l = name.length, isShort = (testNames.length > 1) && ((l * 40) <= (th + (v_gap / 2)));
                     return { name: names[i], l: l, isShort: isShort, isMulti: false, size: 0 };
                 });
 
@@ -541,7 +541,6 @@
 
                 if (short_s > max_short_effective) short_s = max_short_effective;
                 if (long_s > min_long_limit) long_s = min_long_limit;
-
                 let sizes = [], shrink_turn = 'long';
 
                 while (true) {
@@ -581,7 +580,6 @@
                         else if (hasLong) { if (long_s > shrinkLimit) long_s--; else break; } else { if (short_s > shrinkLimit) short_s--; else break; }
                     }
                 }
-
                 if (sizes.length === 0) sizes = names.map(name => ({ name: name, size: shrinkLimit, isMulti: false, isShort: true }));
 
                 let $namelist = $(`<div class='nameList'></div>`).css({ width: `${w}px`, height: `${h}px`, "column-gap": `${v_gap}px` });
@@ -593,12 +591,9 @@
                 return $namelist;
             },
 
-            // 完美修正版陽上演算
             buildLiveList(names, d) {
-                let w = parseFloat(d.width), h = parseFloat(d.height), th = parseFloat(d.textHeight) || h;
-                let v_gap = parseFloat(d.textSpan) || 0, h_gap = 5;
-                let shrinkLimit = (h < 300) ? 8 : ((h < 500) ? 6 : 4);
-                let s = parseFloat(d.fontSize);
+                let w = parseFloat(d.width), h = parseFloat(d.height), th = parseFloat(d.textHeight) || h, v_gap = parseFloat(d.textSpan) || 0, h_gap = 5;
+                let shrinkLimit = (h < 300) ? 8 : ((h < 500) ? 6 : 4), s = parseFloat(d.fontSize);
 
                 while (s >= shrinkLimit) {
                     let size_px = s * 1.333, current_col_h = 0, current_col_w = 0, cols_width = [], any_wrapped = false;
@@ -625,7 +620,46 @@
                 return $namelist;
             },
 
-            // ================= 3. 浮動選單與互動綁定 =================
+            buildRosterList(names, d) {
+                const mid = names.length === 1 ? 1 : Math.floor(names.length / 2);
+                const top = names.slice(0, mid), bot = names.slice(mid);
+                let baseSize = parseFloat(d.fontSize), maxLen = Math.max(...names.map(n => n.length), 0);
+                let finalSize = maxLen > 5 ? Math.max(baseSize * (5 / maxLen), baseSize * 0.6) : baseSize;
+
+                let $wrapper = $(`<div class="rosterList"></div>`).css({ width: `${d.width}px`, height: `${d.height}px`, "writing-mode": "vertical-rl", "display": "flex", "flex-direction": "row", "align-items": "center", "justify-content": "start", "gap": "20px" });
+                let renderGroup = (items) => {
+                    let $g = $(`<div class="rosterspan"></div>`).css({ "display": "flex", "flex-direction": "column", "justify-content": "center", "height": (parseFloat(d.textHeight) || parseFloat(d.height)) + 'px', "white-space": "pre-line" });
+                    items.forEach(x => $g.append($(`<div style="letter-spacing: 10px; text-align: justify; text-align-last: justify; font-size: ${finalSize}px; font-family: ${d.fontFamily};">${x}</div>`)));
+                    return $g;
+                };
+                $wrapper.append(renderGroup(top));
+                if (bot.length) $wrapper.append(renderGroup(bot));
+                return $wrapper;
+            },
+
+            buildCombinedList(names, d) {
+                let baseFontSize = parseFloat(d.fontSize), parts = names.join("\n").split('\n');
+                return $(`
+                    <div class="ancestor-wrapper" style="width:${d.width}px !important; height:${d.height}px !important; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; writing-mode: horizontal-tb; font-family: ${d.fontFamily};">
+                        <span class="main-name" style="line-height: 1.2; font-size: ${baseFontSize}px;">${parts[0] || ''}</span>
+                        <span class="sub-text" style="font-size: ${baseFontSize}px; line-height: 1.2; margin-top: 4px; white-space: normal; writing-mode: vertical-rl;">${parts[1] || ''}</span>
+                    </div>`);
+            },
+
+            buildNormalWithSpace(names, d, className) {
+                let $div = $(`<div class='${className}'></div>`).css({ "width": `${d.width}px`, "height": `${d.height}px`, "writing-mode": "vertical-rl", "display": "flex", "flex-direction": "row", "flex-wrap": "wrap", "column-gap": `${d.textSpan || 0}px`, "align-items": "flex-start", "justify-content": "start", "font-size": `${d.fontSize}px`, "font-family": d.fontFamily });
+                names.forEach(x => $div.append($(`<div>${x}</div>`).css({ "margin-bottom": "10px", "margin-left": "5px", "text-justify": "inter-character", "white-space": "pre-line" })));
+                return $div;
+            },
+
+            // ================= 4. UI 互動與事件綁定 =================
+            bindZoom() {
+                let updateZoom = () => { $('#scaleSize').html(Math.floor(this.zoomScale * 100) + "%"); $('#scaleSlider').val(this.zoomScale); $('#paper-preview').css("transform", `scale(${this.zoomScale})`); };
+                $('#scaleSlider').on("input", e => { this.zoomScale = parseFloat($(e.target).val()); updateZoom(); });
+                $('#zoomOut').on("click", () => { this.zoomScale = Math.max(0.1, this.zoomScale - 0.05); updateZoom(); });
+                $('#zoomIn').on("click", () => { this.zoomScale = Math.min(2.0, this.zoomScale + 0.05); updateZoom(); });
+            },
+
             bindFloatingMenu() {
                 let isDragging = false, startX = 0, startY = 0;
                 $('#menu-header').on('mousedown', e => { isDragging = true; startX = e.clientX - $('#line-floating-menu').offset().left; startY = e.clientY - $('#line-floating-menu').offset().top; });
@@ -639,7 +673,6 @@
                     }
                 });
 
-                // 點擊牌位區塊
                 $('#editor-left').on('click', '.tablet-element', e => {
                     e.preventDefault(); e.stopPropagation();
                     this.selectedElement = $(e.currentTarget);
@@ -649,28 +682,22 @@
                     $('#line-floating-menu').show();
                 });
 
-                // 字體大小拉桿
                 $('input[type="range"]').on('input', e => {
-                    let val = parseInt($(e.target).val());
-                    $('#lbl-fontSize').text(val);
+                    let val = parseInt($(e.target).val()); $('#lbl-fontSize').text(val);
                     if (this.selectedElement) {
                         let target = this.selectedElement.children().first();
-                        let d = this.allStyleDetails.find(y => y.styleID == this.selectStyle && (
-                            (target.hasClass("nameList") && y.elementID == "title1") ||
-                            (target.hasClass("liveList") && y.elementID == "alive")
-                        ));
+                        let style = this.allStyle.find(y => y.styleID == this.selectStyle);
+                        if (!style) return;
+                        let d = (style.details || []).find(y => (target.hasClass("nameList") && y.elementID == "title1") || (target.hasClass("liveList") && y.elementID == "alive"));
                         if (d) { d.fontSize = val; this.rerenderPart(); }
                     }
                 });
             },
 
             renderItemMenu(element) {
-                $("#selectedItem").empty();
-                $("#canselectItem").empty();
+                $("#selectedItem").empty(); $("#canselectItem").empty();
                 let currentData = [], editLabel = "未定義區塊";
-
-                let isChaojian = (this.item_type === 'B' || (typeof VueApp !== 'undefined' && VueApp.item_type === 'B') || (this.tabletItem && this.tabletItem.item_type === 'B')) ||
-                    (this.allStyle.find(y => y.styleID == this.selectStyle)?.name || "").includes("超薦");
+                let isChaojian = (typeof VueApp !== 'undefined' && VueApp.item_type === 'B') || (this.allStyle.find(y => y.styleID == this.selectStyle)?.name || "").includes("超薦");
                 let requireDeceased = isChaojian;
 
                 if (element.hasClass("liveList")) { editLabel = "陽上"; currentData = this.alive; requireDeceased = false; }
@@ -681,28 +708,20 @@
 
                 $("#current-edit-label").text("目前編輯：" + editLabel);
 
-                // 🌟 從物件中取出 fam_name 顯示
                 currentData.forEach((item, index) => {
                     let displayName = typeof item === 'string' ? item : item.fam_name;
-                    $("#selectedItem").append(`
-                        <li><span class="selected">${displayName}</span><div class="list-actions">
-                        <button class="itemUp" data-idx="${index}">↑</button><button class="itemDown" data-idx="${index}">↓</button><button class="itemRemove" data-idx="${index}">-</button>
-                        </div></li>`);
+                    $("#selectedItem").append(`<li><span class="selected">${displayName}</span><div class="list-actions"><button class="itemUp" data-idx="${index}">↑</button><button class="itemDown" data-idx="${index}">↓</button><button class="itemRemove" data-idx="${index}">-</button></div></li>`);
                 });
 
                 if (element.hasClass("address")) { this.bindListEvents(); return; }
 
-                // 🌟 從已選陣列取出名稱來做比對
                 let currentNames = currentData.map(x => typeof x === 'string' ? x : x.fam_name);
                 let filterKeyword = $('#filter_txt').val().trim() || "";
 
                 this.familyMembers.forEach(f => {
                     let isDead = (f.deceased === true || f.deceased === "true" || f.deceased === "True");
                     if (isDead === requireDeceased && !currentNames.includes(f.fam_name) && f.fam_name.includes(filterKeyword)) {
-                        $("#canselectItem").append(`
-                            <li><span style="opacity:0.5">卍</span> <span class="unselect">${f.fam_name}</span>
-                            <span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${f.fam_title ? f.fam_title : ""}</i></span>
-                            <span class='itemAppend' style="float:right;cursor:pointer;">&#43;</span></li>`);
+                        $("#canselectItem").append(`<li><span style="opacity:0.5">卍</span> <span class="unselect">${f.fam_name}</span><span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${f.fam_title ? f.fam_title : ""}</i></span><span class='itemAppend' style="float:right;cursor:pointer;">&#43;</span></li>`);
                     }
                 });
                 this.bindListEvents();
@@ -710,85 +729,101 @@
 
             bindListEvents() {
                 let self = this;
-
                 $("#canselectItem").off("click", ".itemAppend").on("click", ".itemAppend", function (e) {
-                    e.preventDefault();
-                    let name = $(this).siblings(".unselect").text();
-                    let fam = self.familyMembers.find(f => f.fam_name === name);
-                    // 🌟 從親友名單帶入時，組裝成完整物件
-                    let obj = {
-                        IsShuWen: false, deceased: fam ? (fam.deceased === true || fam.deceased === "True") : false,
-                        fam_gender: "", fam_name: name, fam_file: "", nospace: true, num: fam ? fam.num : 0, option_break: false
-                    };
-                    self.modifyDataAndRerender("add", obj);
+                    e.preventDefault(); let name = $(this).siblings(".unselect").text(); let fam = self.familyMembers.find(f => f.fam_name === name);
+                    self.modifyDataAndRerender("add", { IsShuWen: false, deceased: fam ? (fam.deceased === true || fam.deceased === "True") : false, fam_gender: "", fam_name: name, fam_file: "", nospace: true, num: fam ? fam.num : 0, option_break: false });
                 });
 
-                $("#selectedItem").off("click", ".itemRemove").on("click", ".itemRemove", function (e) {
-                    e.preventDefault(); self.modifyDataAndRerender("remove", $(this).data("idx"));
-                });
-                $("#selectedItem").off("click", ".itemUp").on("click", ".itemUp", function (e) {
-                    e.preventDefault(); self.modifyDataAndRerender("up", $(this).data("idx"));
-                });
-                $("#selectedItem").off("click", ".itemDown").on("click", ".itemDown", function (e) {
-                    e.preventDefault(); self.modifyDataAndRerender("down", $(this).data("idx"));
-                });
+                $("#selectedItem").off("click", ".itemRemove").on("click", ".itemRemove", function (e) { e.preventDefault(); self.modifyDataAndRerender("remove", $(this).data("idx")); });
+                $("#selectedItem").off("click", ".itemUp").on("click", ".itemUp", function (e) { e.preventDefault(); self.modifyDataAndRerender("up", $(this).data("idx")); });
+                $("#selectedItem").off("click", ".itemDown").on("click", ".itemDown", function (e) { e.preventDefault(); self.modifyDataAndRerender("down", $(this).data("idx")); });
 
                 $('#btn_add_custom').off("click").on('click', function (e) {
                     e.preventDefault(); let val = $('#custom_txt').val().trim();
-                    if (val) {
-                        // 🌟 手動輸入時，產生帶有 num: 0 的物件
-                        let obj = {
-                            IsShuWen: false, deceased: false, fam_gender: "",
-                            fam_name: val, fam_file: "", nospace: true, num: 0, option_break: false
-                        };
-                        self.modifyDataAndRerender("add", obj);
-                        $('#custom_txt').val('');
-                    }
+                    if (val) { self.modifyDataAndRerender("add", { IsShuWen: false, deceased: false, fam_gender: "", fam_name: val, fam_file: "", nospace: true, num: 0, option_break: false }); $('#custom_txt').val(''); }
                 });
 
-                $('#filter_txt').off("keyup").on('keyup', () => {
-                    if (this.selectedElement) this.renderItemMenu(this.selectedElement.children().first());
-                });
+                $('#filter_txt').off("keyup").on('keyup', () => { if (this.selectedElement) this.renderItemMenu(this.selectedElement.children().first()); });
 
                 $('.styleSelector').off("change").on('change', (e) => {
-                    let val = $(e.target).val();
-                    $('.styleSelector').val(val); // 雙向同步
-                    this.selectStyle = val;
-                    this.renderEditorLeft();
+                    this.selectStyle = $(e.target).val(); this.renderEditorLeft();
                 });
 
-
                 $('#templateSel').off('change').on('change', async (e) => {
                     let template_num = $(e.target).val();
                     if (!template_num) return;
-                    //抓回範本資料
                     try {
-                        let val = $(e.target).val();
-                        this.selectedTemplate = this.tabletTempNameList.find(x=>x.num===template_num);
-                    } catch (error) {
-                        console.error("範本載入失敗:", error);
-                        alert("範本載入失敗！");
-                    }
+                        this.selectedTemplate = this.tabletTempNameList.find(x => x.num == template_num);
+                        if (!this.selectedTemplate) return;
+
+                        if (this.selectedTemplate.tablet) {
+                            let tablet = JSON.parse(this.selectedTemplate.tablet);
+                            this.properTitle = tablet.mid_items || []; this.alive = tablet.left_items || []; this.leftProperTitle = tablet.mid_left || []; this.rightProperTitle = tablet.mid_right || []; this.address = tablet.addr_items || "";
+                        } else { this.properTitle = []; this.alive = []; this.leftProperTitle = []; this.rightProperTitle = []; this.address = ""; }
+
+                        if (this.selectedTemplate.shuwen && this.selectedTemplate.shuwen !== "[]") this.shuwenList = JSON.parse(this.selectedTemplate.shuwen);
+                        else this.shuwenList = [...this.getExtractedNames(this.properTitle), ...this.getExtractedNames(this.leftProperTitle), ...this.getExtractedNames(this.rightProperTitle)];
+
+                        this.selectStyle = this.selectedTemplate.style_id; $('.styleSelector').val(this.selectStyle);
+                        $('#template_name_txt').val(this.selectedTemplate.name || "");
+                        this.renderEditorLeft(); this.renderEditorRight();
+                        if (this.selectedElement) this.renderItemMenu(this.selectedElement.children().first());
+                    } catch (error) { alert("範本載入失敗！資料格式可能有誤。"); }
+                });
+
+                $('#btn_save').off('click').on('click', async function (e) {
+                    e.preventDefault();
+                    let tablet = { mid_items: self.properTitle, left_items: self.alive, mid_left: self.leftProperTitle, mid_right: self.rightProperTitle, addr_items: self.address, style: self.selectStyle }
+                    let thenum = $("#templateSel").val();
+                    let data = { num: thenum == "" ? "0" : thenum, name: $("#template_name_txt").val(), follower_num: self.follower_id, style_id: $(".styleSelector").val(), tablet: JSON.stringify(tablet), shuwen: JSON.stringify(self.shuwenList) }
+                    await axios.post('/api/follower/SaveTabletTemplate', data).then(res => {
+                        if (res.status == 200) {
+
+                            //alert("儲存成功！");
+                            VueApp.snackbar.show = true;
+                            VueApp.snackbar.message = "儲存成功";
+                            self.getTemplateNameList();
+
+                            // (可選) 如果您希望存檔後，下拉選單保持在剛存好的那個範本，
+                            // 可以在這裡把 thenum 塞回去（前提是 API 有回傳新 ID 或原本就是更新舊檔）
+                            if (thenum !== "") {
+                                $("#templateSel").val(thenum);
+                            }
+                        } else {
+                            VueApp.snackbar.show = true;
+                            VueApp.snackbar.message = "儲存失敗";
+                        };
+                    });
                 });
 
                 // ==========================================
-                // 🌟 3. 儲存按鈕事件 (含範本資料)
+                // 🌟 4. 新增範本按鈕事件 (清空所有資料)
                 // ==========================================
-                $('#btn_save').off('click').on('click', async function (e) {
+                $('#btn_new_template').off('click').on('click', (e) => {
                     e.preventDefault();
-                    let tablet = {
-                        mid_items: self.properTitle,
-                        left_items: self.alive,
-                        mid_left: self.leftProperTitle,
-                        mid_right: self.rightProperTitle,
-                        addr_items: self.address,
-                        style: self.selectStyle,
+
+                    // 1. 清空頂端的選單與名稱
+                    $("#templateSel").val("");
+                    $("#template_name_txt").val("");
+
+                    // 2. 清空所有名單資料與狀態
+                    this.selectedTemplate = {};
+                    this.properTitle = [];
+                    this.alive = [];
+                    this.leftProperTitle = [];
+                    this.rightProperTitle = [];
+                    this.address = "";
+                    this.shuwenList = [];
+
+                    // 3. 重新渲染畫面 (這時會印出空的牌位區塊)
+                    this.renderEditorLeft();
+                    this.renderEditorRight();
+
+                    // 4. 如果浮動選單目前開著，也要同步清空選單裡的「已選」清單
+                    if (this.selectedElement) {
+                        let target = this.selectedElement.children().first();
+                        this.renderItemMenu(target);
                     }
-                    let data = {
-                        num: 0, name: $("#template_name_txt").val(), follower_num: VueApp.follower_id,
-                        style_id: $(".styleSelector").val(), tablet: JSON.stringify(tablet), shuwen: ""
-                    }
-                    console.log("btn_save:", data);
                 });
             },
 
@@ -802,197 +837,26 @@
                 else if (target.hasClass("righttitle")) targetArr = this.rightProperTitle;
                 else if (target.hasClass("address")) {
                     if (action === "add") this.address = typeof payload === 'string' ? payload : payload.fam_name;
-                    else if (action === "remove") this.address = "";
-                    targetArr = null;
+                    else if (action === "remove") this.address = ""; targetArr = null;
                 }
 
                 if (targetArr) {
                     if (action === "add") {
-                        // 🌟 檢查是否已經存在 (比對物件的 fam_name)
                         if (targetArr.some(x => x.fam_name === payload.fam_name)) { alert("名稱已存在！"); return; }
                         targetArr.push(payload);
-                    }
-                    else if (action === "remove") { targetArr.splice(payload, 1); } // 🌟 刪除改用 index
-                    else if (action === "up" && payload > 0) [targetArr[payload - 1], targetArr[payload]] = [targetArr[payload], targetArr[payload - 1]];
-                    else if (action === "down" && payload < targetArr.length - 1) [targetArr[payload], targetArr[payload + 1]] = [targetArr[payload + 1], targetArr[payload]];
+                        if (targetArr !== this.alive && targetArr !== null) this.shuwenList.push(payload.fam_name);
+                    } else if (action === "remove") {
+                        if (targetArr !== this.alive && targetArr !== null) {
+                            let nameToRemove = typeof targetArr[payload] === 'string' ? targetArr[payload] : targetArr[payload].fam_name;
+                            let sIdx = this.shuwenList.indexOf(nameToRemove); if (sIdx > -1) this.shuwenList.splice(sIdx, 1);
+                        }
+                        targetArr.splice(payload, 1);
+                    } else if (action === "up" && payload > 0) { [targetArr[payload - 1], targetArr[payload]] = [targetArr[payload], targetArr[payload - 1]]; }
+                    else if (action === "down" && payload < targetArr.length - 1) { [targetArr[payload], targetArr[payload + 1]] = [targetArr[payload + 1], targetArr[payload]]; }
                 }
-
-                this.renderItemMenu(target);
-                this.rerenderPart();
-                if (this.renderEditorRight) this.renderEditorRight();
-            },
-
-            rerenderPart() {
-                if (!this.selectedElement) return;
-                let target = this.selectedElement.children().first();
-
-                let style = this.allStyle.find(y => y.styleID == this.selectStyle);
-                if (!style) return;
-
-                let details = style.details || this.allStyleDetails.filter(y => y.styleID == this.selectStyle);
-
-                // 🌟 加入尋找設定檔的判斷
-                let d = details.find(y => (
-                    (target.hasClass("nameList") && y.elementID == "title1") ||
-                    (target.hasClass("rosterList") && y.elementID == "titletriangle") ||
-                    (target.hasClass("ancestor-wrapper") && (y.elementID == "combined" || y.elementID == "tricombined")) ||
-                    (target.hasClass("liveList") && y.elementID == "alive") ||
-                    (target.hasClass("lefttitle") && y.elementID == "lefttitle") ||
-                    (target.hasClass("righttitle") && y.elementID == "righttitle") ||
-                    (target.hasClass("address") && y.elementID == "address")
-                ));
-                if (!d) return;
-
-                this.selectedElement.empty();
-                let html = "";
-
-                // 🌟 在傳入排版引擎前，統一 map 成字串陣列
-                let pTitleNames = this.properTitle.map(x => typeof x === 'string' ? x : x.fam_name);
-                let aliveNames = this.alive.map(x => typeof x === 'string' ? x : x.fam_name);
-                let leftNames = this.leftProperTitle.map(x => typeof x === 'string' ? x : x.fam_name);
-                let rightNames = this.rightProperTitle.map(x => typeof x === 'string' ? x : x.fam_name);
-
-                if (target.hasClass("nameList")) html = this.buildNameList(pTitleNames, d);
-                else if (target.hasClass("rosterList")) html = this.buildRosterList(pTitleNames, d);
-                else if (target.hasClass("ancestor-wrapper")) html = this.buildCombinedList(pTitleNames, d);
-                else if (target.hasClass("liveList")) html = this.buildLiveList(aliveNames, d);
-                else if (target.hasClass("lefttitle")) html = this.buildNormalWithSpace(leftNames, d, 'lefttitle');
-                else if (target.hasClass("righttitle")) html = this.buildNormalWithSpace(rightNames, d, 'righttitle');
-                else if (target.hasClass("address")) html = `<div class='address' style='width:${d.width}px; height:${d.height}px; font-size:${d.fontSize}px; font-family:${d.fontFamily};'>${this.address}</div>`;
-
-                this.selectedElement.append(html);
-            },
-            // 縮放控制
-            bindZoom() {
-                let updateZoom = () => { $('#scaleSize').html(Math.floor(this.zoomScale * 100) + "%"); $('#scaleSlider').val(this.zoomScale); $('#paper-preview').css("transform", `scale(${this.zoomScale})`); };
-                $('#scaleSlider').on("input", e => { this.zoomScale = parseFloat($(e.target).val()); updateZoom(); });
-                $('#zoomOut').on("click", () => { this.zoomScale = Math.max(0.1, this.zoomScale - 0.05); updateZoom(); });
-                $('#zoomIn').on("click", () => { this.zoomScale = Math.min(2.0, this.zoomScale + 0.05); updateZoom(); });
-            },
-            // 🌟 1. 品字排版引擎 (titletriangle)
-            buildRosterList(names, d) {
-                if (!names.length) names = ["請選擇"];
-                const mid = names.length === 1 ? 1 : Math.floor(names.length / 2);
-                const top = names.slice(0, mid);
-                const bot = names.slice(mid);
-
-                // 計算自動縮小字體
-                let baseSize = parseFloat(d.fontSize);
-                const maxLen = Math.max(...names.map(n => n.length), 0);
-                let finalSize = maxLen > 5 ? Math.max(baseSize * (5 / maxLen), baseSize * 0.6) : baseSize;
-
-                let $wrapper = $(`<div class="rosterList"></div>`).css({
-                    width: `${d.width}px`, height: `${d.height}px`,
-                    "writing-mode": "vertical-rl",
-                    "display": "flex",
-                    "flex-direction": "row",
-                    "align-items": "center",
-                    "justify-content": "start",
-                    "gap": "20px"
-                });
-
-                let renderGroup = (items) => {
-                    let $g = $(`<div class="rosterspan"></div>`).css({
-                        "display": "flex",
-                        "flex-direction": "column",
-                        "justify-content": "center",
-                        "height": (parseFloat(d.textHeight) || parseFloat(d.height)) + 'px',
-                        "white-space": "pre-line"
-                    });
-                    items.forEach(x => {
-                        $g.append($(`<div style="letter-spacing: 10px; text-align: justify; text-align-last: justify; font-size: ${finalSize}px; font-family: ${d.fontFamily};">${x}</div>`));
-                    });
-                    return $g;
-                };
-
-                $wrapper.append(renderGroup(top));
-                if (bot.length) $wrapper.append(renderGroup(bot));
-
-                return $wrapper;
-            },
-
-            // 🌟 2. 合併多姓氏排版引擎 (combined)
-            buildCombinedList(names, d) {
-                if (!names.length) names = ["請選擇"];
-                let baseFontSize = parseFloat(d.fontSize);
-
-                // 取前兩筆作為 main-name 與 sub-text
-                const parts = names.join("\n").split('\n');
-
-                // 因為這個元素需要水平包覆垂直，所以把 CSS 直接寫進 inline-style
-                let html = `
-                <div class="ancestor-wrapper" style="width:${d.width}px !important; height:${d.height}px !important; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; writing-mode: horizontal-tb; font-family: ${d.fontFamily};">
-                    <span class="main-name" style="line-height: 1.2; font-size: ${baseFontSize}px;">${parts[0] || ''}</span>
-                    <span class="sub-text" style="font-size: ${baseFontSize}px; line-height: 1.2; margin-top: 4px; white-space: normal; writing-mode: vertical-rl;">${parts[1] || ''}</span>
-                </div>`;
-
-                return $(html);
-            },
-            // 🌟 完美還原左右正名的換行與間距排版
-            buildNormalWithSpace(names, d, className) {
-                let $div = $(`<div class='${className}'></div>`).css({
-                    "width": `${d.width}px`,
-                    "height": `${d.height}px`,
-                    "writing-mode": "vertical-rl",
-                    "display": "flex",
-                    "flex-direction": "row",
-                    "flex-wrap": "wrap",
-                    "column-gap": `${d.textSpan || 0}px`,
-                    "align-items": "flex-start",
-                    "justify-content": "start",
-                    "font-size": `${d.fontSize}px`,
-                    "font-family": d.fontFamily
-                });
-                names.forEach(x => {
-                    $div.append($(`<div>${x}</div>`).css({
-                        "margin-bottom": "10px",
-                        "margin-left": "5px",
-                        "text-justify": "inter-character",
-                        "white-space": "pre-line"
-                    }));
-                });
-                return $div;
-            },
-            // 🌟 處理右側 Editor 同步渲染 (強制一行一個)
-            renderEditorRight() {
-                let $editorRight = $('#editor-right');
-                $editorRight.empty();
-                $editorRight.css({
-                    "writing-mode": "vertical-rl", "text-orientation": "mixed", "padding": "20px", "display": "block"
-                });
-
-                // 🌟 同樣從物件萃取 fam_name
-                let syncNames = [
-                    ...this.properTitle.map(x => x.fam_name),
-                    ...this.leftProperTitle.map(x => x.fam_name),
-                    ...this.rightProperTitle.map(x => x.fam_name)
-                ];
-
-                syncNames.forEach(name => {
-                    let $div = $('<div></div>').css({
-                        "font-size": "16pt", "font-family": "DFKai-sb", "line-height": "1.2", "letter-spacing": "2px", "white-space": "pre-line", "margin-left": "25px"
-                    }).text(name);
-                    $editorRight.append($div);
-                });
-            },
+                this.renderItemMenu(target); this.rerenderPart(); this.renderEditorRight();
+            }
         };
 
-        // ================= 4. 啟動與 Message 接聽 =================
-        //$(window).on("message", function (event) {
-        //    let e = event.originalEvent;
-        //    if (e.origin === window.location.origin || e.origin === window.parent.location.origin) {
-        //        const data = e.data;
-        //        console.log("template load:",data)
-        //        //if (data.tabletItem) {
-        //        //    designer.tabletItem = data.tabletItem;
-        //        //    if (data.familyMembers) designer.familyMembers = data.familyMembers;
-        //        //    designer.getData();
-        //        //}
-        //    }
-        //});
-
-        $(() => {
-            designer.init();
-          
-        });
-    </script>
\ No newline at end of file
+        $(() => { designer.init(); });
+    </script>
diff --git a/web/admin/order/reg.aspx b/web/admin/order/reg.aspx
index f256816..c1e038f 100644
--- a/web/admin/order/reg.aspx
+++ b/web/admin/order/reg.aspx
@@ -1010,7 +1010,8 @@
 
                             try {
                                 // 嘗試獲取家族成員數據
-                                const response = await axios.get(HTTP_HOST + 'api/familymembers/follower/' + this.follower_id);
+                                console.log("哩來哩來:",this.follower_id)
+                                const response = await axios.get( '/api/familymembers/follower/' + this.follower_id);
                                 familyMembers = response.data;
                             } catch (error) {
                                 console.warn('error:', error);
diff --git a/web/admin/print/print_multi_new.aspx b/web/admin/print/print_multi_new.aspx
index b4cb1df..16a9488 100644
--- a/web/admin/print/print_multi_new.aspx
+++ b/web/admin/print/print_multi_new.aspx
@@ -502,7 +502,7 @@
                             }
                             let long_s = Number(d.fontSize);
                             let short_s = Number(d.fontSize);
-                            if (mid.length==1&&mid[0].includes("暨無始劫以來累世冤親債主")) {
+                            if (Number(d.height)<500&&mid.length == 1 && mid[0].includes("暨無始劫以來累世冤親債主")) {
                                 mid = mid[0].split("暨")
                                 mid[0] = mid[0] + "暨";
                                 console.log("mid:",mid)
diff --git a/web/admin/print/tablet_edit/editorNewOne.html b/web/admin/print/tablet_edit/editorNewOne.html
index 590c152..c034495 100644
--- a/web/admin/print/tablet_edit/editorNewOne.html
+++ b/web/admin/print/tablet_edit/editorNewOne.html
@@ -7,10 +7,7 @@
     <link href="../../../js/bootstrap5/bootstrap.min.css" rel="stylesheet" />
     <link href="../../../js/fontawesome6/css/all.min.css" rel="stylesheet" />
     <link href="../../item/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
-    <link href="../../../js/vuetify.css" rel="stylesheet" />
     <link href="../../../js/mdi-font/css/materialdesignicons.min.css" rel="stylesheet" />
-    <script src="../../../js/vue.min.js"></script>
-    <script src="../../../js/vuetify.min.js"></script>
     <script src="../../../js/axios.min.js"></script>
     <script src="../../../js/bootstrap5/js/bootstrap.bundle.min.js"></script>
     <script src="../../../js/jquery-4.0.0.min.js"></script>
@@ -46,33 +43,25 @@
             <div class="row mt-2">
                 <div class="col-3">
                     版型設定:
-
                     <select id="styleSel" onchange="designer.changeStyle()" class="form-select">
                         <option value="">請選擇版型</option>
                     </select>
                 </div>
+                <div class="col-3">
+                    引用範本:
+                    <select id="templateSel" onchange="designer.changeTemplate()" class="form-select">
+                        <option value="">請選擇範本</option>
+                    </select>
+                </div>
                 <div class="col-2">
                     <button class="btn btn-primary" onclick="designer.save(event)">儲存牌位</button>
                 </div>
-                <div class="col-5">
-                    <!-- 原生縮放橫軸容器 -->
+                <div class="col-4">
                     <div style="display: flex; align-items: center; padding: 8px; background-color: #f5f5f5; border-radius: 4px; margin-bottom: 12px; font-family: sans-serif;">
-                        <span style="margin-right: 8px; font-size: 14px;"  onclick="designer.minusZoomScalee()">➖</span>
-
-                        <!-- 使用 input type="range"，綁定 zoomScale -->
-                        <!-- min="0.2" (20%), max="1.5" (150%), step="0.05" (每次滑動5%) -->
-                        <input type="range"
-                               v-model="designer.zoomScale"
-                               min="0.0"
-                               max="1.0"
-                               step="0.05"
-                               style="flex-grow: 1; cursor: pointer;" id="scaleSlider">
-
-                        <span style="margin-left: 8px; font-size: 14px;" onclick="designer.plusZoomScalee()">➕</span>
-                        <!-- 顯示百分比數值 -->
-                        <span id="scaleSize" style="margin-left: 12px; min-width: 45px; font-weight: bold; font-size: 14px; text-align: right;">
-                            
-                        </span>
+                        <span style="margin-right: 8px; font-size: 14px; cursor: pointer;" onclick="designer.minusZoomScalee()">➖</span>
+                        <input type="range" min="0.0" max="1.0" step="0.05" style="flex-grow: 1; cursor: pointer;" id="scaleSlider">
+                        <span style="margin-left: 8px; font-size: 14px; cursor: pointer;" onclick="designer.plusZoomScalee()">➕</span>
+                        <span id="scaleSize" style="margin-left: 12px; min-width: 45px; font-weight: bold; font-size: 14px; text-align: right;"></span>
                     </div>
                 </div>
             </div>
@@ -81,10 +70,8 @@
                 <div class="col-5 div_border" style="font-size:12px;">
                     <div class="row" style="height: 50%; overflow-y: auto;">
                         <div style="display:inline-block;width:100%;height:30px;background-color:darkgray;">
-                            <div class="row" >
-                                <div class="col-12">
-                                    <h3>已選</h3>
-                                </div>
+                            <div class="row">
+                                <div class="col-12"><h3>已選</h3></div>
                                 <div class="col-10">
                                     <div class="form-floating mb-3">
                                         <input class="form-control" type="text" id="custom_txt" placeholder="請輸入名稱" />
@@ -95,20 +82,16 @@
                                     <button type="button" class="custom_add" onclick="designer.addNewItem()" style="width:20px;height:20px;font-size:25px">+</button>
                                 </div>
                             </div>
-                            <ul class="selectedItem" style="margin-left:1rem;margin-right:1rem;">
-                            </ul>
+                            <ul class="selectedItem" style="margin-left:1rem;margin-right:1rem;"></ul>
                         </div>
                     </div>
                     <div class="row" style="height:50%;overflow-y:auto;">
                         <div style="display:inline-block;width:100%;height:30px;background-color:darkgray;">
-                            <div class="row" >
-                                <div class="col-12">
-                                    <h3>可選</h3>
-                                </div>
+                            <div class="row">
+                                <div class="col-12"><h3>可選</h3></div>
                                 <div class="col-10">
                                     <div class="form-floating mb-3">
-                                        <input class="form-control" type="text" id="filter_txt"
-                                               onkeyup="designer.filterToSel()" placeholder="篩選條件" />
+                                        <input class="form-control" type="text" id="filter_txt" onkeyup="designer.filterToSel()" placeholder="篩選條件" />
                                         <label for="filter_txt">篩選條件</label>
                                     </div>
                                 </div>
@@ -118,15 +101,14 @@
                                     </button>
                                 </div>
                             </div>
-                            <ul class="canselectItem" style="margin-left: 1rem;margin-right:1rem;">
-                            </ul>
+                            <ul class="canselectItem" style="margin-left: 1rem;margin-right:1rem;"></ul>
                         </div>
                     </div>
                 </div>
             </div>
-
         </div>
     </div>
+
     <div class="modal fade hide" id="familyModal" tabindex="-1" aria-labelledby="familyModalLabel" aria-hidden="true" style="z-index:10000 !important;">
         <div class="modal-dialog">
             <div class="modal-content">
@@ -138,15 +120,13 @@
                     <div class="row">
                         <div class="col-12">
                             <div class="form-floating mb-3">
-                                <input class="form-control" type="text" id="family_txt"
-                                       placeholder="姓名" />
+                                <input class="form-control" type="text" id="family_txt" placeholder="姓名" />
                                 <label for="family_txt">姓名</label>
                             </div>
                         </div>
                         <div class="col-12">
                             <div class="form-floating mb-3">
-                                <select class="form-select" id="deceased_sel"
-                                        placeholder="存歿">
+                                <select class="form-select" id="deceased_sel" placeholder="存歿">
                                     <option value="False">存</option>
                                     <option value="True">歿</option>
                                 </select>
@@ -155,8 +135,7 @@
                         </div>
                         <div class="col-12">
                             <div class="form-floating mb-3">
-                                <input class="form-control" type="text" id="title_txt"
-                                       placeholder="稱謂" />
+                                <input class="form-control" type="text" id="title_txt" placeholder="稱謂" />
                                 <label for="title_txt">稱謂</label>
                             </div>
                         </div>
@@ -169,50 +148,30 @@
             </div>
         </div>
     </div>
-    <div class="position-fixed top-50 start-50 p-3" style="z-index: 10001" >
-        <div id="liveToast" class="toast hide " role="alert" aria-live="assertive" 
-             data-bs-delay="3000" aria-atomic="true" 
-             style="color:white;background-color:dimgray;opacity:1;font-size:24px;">
+
+    <div class="position-fixed top-50 start-50 p-3" style="z-index: 10001">
+        <div id="liveToast" class="toast hide " role="alert" aria-live="assertive" data-bs-delay="3000" aria-atomic="true" style="color:white;background-color:dimgray;opacity:1;font-size:24px;">
             <div class="toast-header">
-                <!--<img src="..." class="rounded me-2" alt="...">
-    <strong class="me-auto">Bootstrap</strong>
-    <small>11 mins ago</small>-->
                 <strong class="me-auto">提示訊息</strong>
                 <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
             </div>
-            <div class="toast-body" id="toast_body">
-                
-            </div>
+            <div class="toast-body" id="toast_body"></div>
         </div>
     </div>
+
     <script type="text/javascript">
         const designer = {
-            zoomScale:0.5,
-            code: {
-                style: []
-            },
-            selected: {
-                style: ""
-            },
+            zoomScale: 0.5,
+            selected: { style: "" },
+            tabletTempNameList: [],
+            selectedTemplate: {},
             actitem: "",
             pageSize: "",
             defaultStyle: "",
-            isAllSelected: false,
-            dialog: false,
-            addDialog: false,        // 新增項目對話框
-            addDialogType: '',       // 'Y' 或 'N'
-            newItemText: '',         // 新增項目的文字
-            noSpace: true,           // 不加空格 checkbox（預設勾選）
-            deleteDialog: false,     // 確認刪除對話框
-            deleteIndex: -1,         // 要刪除的 index
-            deleteType: '',          // 'Y' 或 'N'
-            deleteMemberName: '',    // 要刪除的名稱（顯示用）
-            phrases: [],             // 常用片語
-            familyMembers: [], // 親友名單
-            tabletItem: {}, // 傳入的資料(信眾/牌位資訊)
-            item: {},
-            family_deceased_Y_selected: [], // 超渡/超薦/超冤名單
-            family_deceased_N_selected: [],  // 消災/陽上名單
+            familyMembers: [],
+            tabletItem: {},
+            family_deceased_Y_selected: [],
+            family_deceased_N_selected: [],
             family_left_title: [],
             family_right_title: [],
             family_address: "",
@@ -224,13 +183,12 @@
             printData: [],
             selectedElement: {},
             selectStyle: {},
-            properTitle: [],//正名
-            leftProperTitle: [],//左正名
-            rightProperTitle: [],//右正名
-            address: "",//地址
-            alive: [],//陽上
+            properTitle: [],
+            leftProperTitle: [],
+            rightProperTitle: [],
+            address: "",
+            alive: [],
             tabletType: "A",
-            http_host: "",
             follower_id: "",
             toast: null,
             modal: null,
@@ -243,1940 +201,853 @@
                 { name: "消災4", path: "../../../admin/print/html/tablet-2D.svg" }
             ],
             async init() {
-                // 載入常用片語
-                fetch('phrases.json')
-                    .then(res => res.json())
-                    .then(data => { this.phrases = data; })
-                    .catch(err => console.error('載入 phrases.json 失敗:', err));
                 this.toast = new bootstrap.Toast($('#liveToast'));
                 this.modal = new bootstrap.Modal($('#familyModal'));
-                //this.toast.show();
-                $("#scaleSize").html((this.zoomScale * 100) + "%")
-                $("#scaleSlider").val(this.zoomScale)
-                $("#scaleSlider").on("change", function () {
-                    this.zoomScale = $(this).val()
-                    $("#scaleSize").html(Math.floor(Number($(this).val()) * 100) + "%");
-                    $(".tablet-paper").css("transform",`scale(${Number($(this).val())})`);
-                })
+                $("#scaleSize").html((this.zoomScale * 100) + "%");
+                $("#scaleSlider").val(this.zoomScale).on("input change", function () {
+                    designer.zoomScale = parseFloat($(this).val());
+                    $("#scaleSize").html(Math.floor(designer.zoomScale * 100) + "%");
+                    $(".tablet-paper").css("transform", `scale(${designer.zoomScale})`);
+                });
+            },
+            async getTemplateNameList() {
+                $("#templateSel").empty().append('<option value="">請選擇範本</option>');
+                this.tabletTempNameList.length = 0;
+                if (!this.follower_id) return;
+                await axios.post('/api/follower/GetTabletTemplateList', { num: this.follower_id }).then(res => {
+                    if (res.status == 200 && res.data.list) {
+                        this.tabletTempNameList = res.data.list;
+                        this.tabletTempNameList.forEach(x => {
+                            $('#templateSel').append(`<option value="${x.num}">${x.name}</option>`);
+                        });
+                    }
+                });
+            },
+            async changeTemplate() {
+                let template_num = $("#templateSel").val();
+                if (!template_num) return;
+                this.selectedTemplate = this.tabletTempNameList.find(x => x.num == template_num);
+                if (!this.selectedTemplate) return;
+
+                if (this.selectedTemplate.tablet) {
+                    let tablet = JSON.parse(this.selectedTemplate.tablet);
+                    this.properTitle.length = 0; this.leftProperTitle.length = 0; this.rightProperTitle.length = 0; this.alive.length = 0;
+                    this.family_deceased_Y_selected.length = 0; this.family_deceased_N_selected.length = 0;
+                    this.family_left_title.length = 0; this.family_right_title.length = 0; this.family_address = "";
+
+                    let mid_items = tablet.mid_items || [];
+                    let left_items = tablet.left_items || [];
+                    let mid_left = tablet.mid_left || [];
+                    let mid_right = tablet.mid_right || [];
+                    let address = tablet.addr_items || "";
+
+                    Object.assign(this.family_deceased_N_selected, mid_items);
+                    Object.assign(this.family_deceased_Y_selected, left_items);
+                    Object.assign(this.family_left_title, mid_left);
+                    Object.assign(this.family_right_title, mid_right);
+                    this.family_address = address;
+
+                    mid_items.forEach(y => this.properTitle.push(y.fam_name));
+                    left_items.forEach(y => this.alive.push(y.fam_name));
+                    mid_left.forEach(y => this.leftProperTitle.push(y.fam_name));
+                    mid_right.forEach(y => this.rightProperTitle.push(y.fam_name));
+                    this.address = address;
+                }
+
+                if (this.selectedTemplate.style_id) {
+                    this.selectStyle.style = this.selectedTemplate.style_id;
+                    this.selected.style = this.selectedTemplate.style_id;
+                    $("#styleSel").val(this.selectedTemplate.style_id);
+                }
+                this.render();
             },
             async minusZoomScalee() {
-                this.zoomScale = this.zoomScale - 0.05
-                $("#scaleSize").html(Math.floor(this.zoomScale * 100) + "%")
-                $("#scaleSlider").val(this.zoomScale)
-                $(".tablet-paper").css("transform", `scale(${Number(this.zoomScale)})`);
+                this.zoomScale = Math.max(0, this.zoomScale - 0.05);
+                $("#scaleSize").html(Math.floor(this.zoomScale * 100) + "%");
+                $("#scaleSlider").val(this.zoomScale);
+                $(".tablet-paper").css("transform", `scale(${this.zoomScale})`);
             },
             async plusZoomScalee() {
-                this.zoomScale = this.zoomScale + 0.05
-                $("#scaleSize").html(Math.floor(this.zoomScale * 100) + "%")
-                $("#scaleSlider").val(this.zoomScale)
-                $(".tablet-paper").css("transform", `scale(${Number(this.zoomScale)})`);
-            },  //加撈activity_relating的資料，用來判斷是否有人數上限 activity_num actItem_num
+                this.zoomScale = Math.min(1.0, this.zoomScale + 0.05);
+                $("#scaleSize").html(Math.floor(this.zoomScale * 100) + "%");
+                $("#scaleSlider").val(this.zoomScale);
+                $(".tablet-paper").css("transform", `scale(${this.zoomScale})`);
+            },
             async getActItem() {
-                //console.log(this.tabletItem.has_chao_limit, this.tabletItem.has_yang_limit, this.tabletItem.chao_limit_count, this.tabletItem.yang_limit_count)
-                axios
-                    .post('/api/tablet/GetActItem', { itemNum: this.actitem })
-                    .then(response => {
-
-                        if (response.data.result == "Y" && response.data.data) {
-                            this.pageSize = response.data.data.pageSize;
-                            this.defaultStyle = response.data.data.defaultStyle;
-                            this.selected.style = response.data.data.defaultStyle;
-                            this.selectStyle.style = response.data.data.defaultStyle;
-                            //console.log("GetActItem:",this.defaultStyle)
-                            $("#styleSel").val(this.defaultStyle);
-                        }
+                await axios.post('/api/tablet/GetActItem', { itemNum: this.actitem }).then(response => {
+                    if (response.data.result == "Y" && response.data.data) {
+                        this.pageSize = response.data.data.pageSize;
+                        this.defaultStyle = response.data.data.defaultStyle;
+                        this.selected.style = response.data.data.defaultStyle;
+                        this.selectStyle.style = response.data.data.defaultStyle;
+                        $("#styleSel").val(this.defaultStyle);
                     }
-                    );
-
+                });
             },
             async getAllStyleDetails() {
                 this.allStyleDetails.length = 0;
-                await axios
-                    .post('/api/tablet/GetStyleDetailData', {})
-                    .then(response => {
-                        if (response.status == "200") {
-                            let data = response.data;
-                            if (data.result == "Y") {
-                                let details = data.data;
-                                this.allStyleDetails = details;
-                                //console.log(data.data);
-                            }
-                        }
+                await axios.post('/api/tablet/GetStyleDetailData', {}).then(response => {
+                    if (response.status == "200" && response.data.result == "Y") {
+                        this.allStyleDetails = response.data.data;
                     }
-                    );
+                });
             },
             async getPaperSize() {
                 this.allSize.length = 0;
-                let self = this
-                await axios
-                    .post('/api/tablet/GetPaperSize', {})
-                    .then(response => {
-                        //if (response.result=="Y") {
-                        if (response.status == "200") {
-                            let data = response.data;
-                            this.allSize = data.data;
-                        }
-                        //$("#paperSizeSel").val("0003");
-                    })
+                await axios.post('/api/tablet/GetPaperSize', {}).then(response => {
+                    if (response.status == "200") {
+                        this.allSize = response.data.data;
+                    }
+                });
             },
             async getTabletElement() {
                 this.tabletElement.length = 0;
-                await axios
-                    .post('/api/tablet/GetTabletElement', {})
-                    .then(response => {
-                        //if (response.result=="Y") {
-                        if (response.status == "200") {
-                            let data = response.data;
-                            this.tabletElement = data.data;
-                        }
-                    });
+                await axios.post('/api/tablet/GetTabletElement', {}).then(response => {
+                    if (response.status == "200") {
+                        this.tabletElement = response.data.data;
+                    }
+                });
             },
             async getTabletStyles() {
                 this.allStyle.length = 0;
-                await axios
-                    .post('/api/tablet/GetStyleData', {})
-                    .then(response => {
-                        if (response.status == "200") {
-                            let data = response.data;
-                            if (data.data) {
-                                data.data.forEach(x => {
-                                    if (x.styleID !== "000001") {
-                                        this.allStyle.push(x);
-                                        $("#styleSel").append(`<option value="${x.styleID}">${x.name}</option`);
-                                    }
-                                })
+                await axios.post('/api/tablet/GetStyleData', {}).then(response => {
+                    if (response.status == "200" && response.data.data) {
+                        response.data.data.forEach(x => {
+                            if (x.styleID !== "000001") {
+                                this.allStyle.push(x);
+                                $("#styleSel").append(`<option value="${x.styleID}">${x.name}</option>`);
                             }
-                        }
-                    });
+                        });
+                    }
+                });
             },
             async getData() {
-                //console.log("getData:", this.tabletItem)
                 this.printData.length = 0;
-                this.properTitle.length = 0
-                this.leftProperTitle.length = 0;
-                this.rightProperTitle.length = 0;
-                this.alive.length = 0;
-                //let list = localStorage.getItem("list")
-                let param = [];
-                let self = this;
-                param.push({ order_no: this.tabletItem.order_no, num: this.tabletItem.num })
-              
+                this.properTitle.length = 0; this.leftProperTitle.length = 0; this.rightProperTitle.length = 0; this.alive.length = 0;
+                let param = [{ order_no: this.tabletItem.order_no, num: this.tabletItem.num }];
 
-                await axios
-                    .post('/api/orderdetail/GetDetailToPrint', { param: param })
-                    .then(response => {
-
-                        if (response.status == 200) {
-                            self.printData = response.data;
-                            console.log("GetDetailToPrint:",response);
-                            self.printData.forEach(x => {
-                                //console.log("GetDetailToPrint:",x.style);
-                                if (x.style != null && x.style != undefined) {
-                                    self.selectStyle.style = x.style;
-                                    self.selected.style = x.style;
-                                    self.defaultStyle = x.style;
-                                    $("#styleSel").val(x.style)
+                await axios.post('/api/orderdetail/GetDetailToPrint', { param: param }).then(response => {
+                    if (response.status == 200) {
+                        this.printData = response.data;
+                        this.printData.forEach(x => {
+                            if (x.style != null && x.style != undefined) {
+                                this.selectStyle.style = x.style;
+                                this.selected.style = x.style;
+                                this.defaultStyle = x.style;
+                                $("#styleSel").val(x.style);
+                            }
+                            if (x.f_num_tablet != "") {
+                                let tablet = JSON.parse(x.f_num_tablet);
+                                let mid_items = tablet?.mid_items;
+                                let left_items = tablet?.left_items;
+                                let mid_left = tablet?.mid_left;
+                                let mid_right = tablet?.mid_right;
+                                let address = tablet?.addr_items === undefined ? "" : tablet?.addr_items;
+                                if (address === "" && x.address != "") {
+                                    address = x.address;
                                 }
-                                if (x.f_num_tablet != "") {
-                                    let tablet = JSON.parse(x.f_num_tablet);
+                                this.family_deceased_Y_selected.length = 0;
+                                this.family_deceased_N_selected.length = 0;
+                                this.family_left_title.length = 0;
+                                this.family_right_title.length = 0;
 
-                                    let mid_items = tablet?.mid_items;
-                                    let left_items = tablet?.left_items;
-                                    let mid_left = tablet?.mid_left;
-                                    let mid_right = tablet?.mid_right;
-                                    let address = tablet?.addr_items===undefined?"":tablet?.addr_items;
-                                    if (address === "") {
-                                        if (x.address!="") {
-                                            address = x.address
-                                        }
-                                    }
-                                    self.family_deceased_Y_selected.length = 0;
-                                    self.family_deceased_N_selected.length = 0;
-                                    self.family_address = address;
-                                    self.family_left_title.length = 0;
-                                    self.family_right_title.length = 0;
-                                    Object.assign(self.family_deceased_N_selected, mid_items);
-                                    Object.assign(self.family_deceased_Y_selected, left_items);
-                                    Object.assign(self.family_left_title, mid_left);
-                                    Object.assign(self.family_right_title, mid_right);
-                                    self.family_address = address;//tablet.addr_items;
-                                    //let mid = [];
-                                    //family_deceased_Y_selected family_deceased_N_selected
-                                    if (mid_items) {
-                                        mid_items.forEach(y => {
-                                            self.properTitle.push(y.fam_name);
+                                Object.assign(this.family_deceased_N_selected, mid_items);
+                                Object.assign(this.family_deceased_Y_selected, left_items);
+                                Object.assign(this.family_left_title, mid_left);
+                                Object.assign(this.family_right_title, mid_right);
+                                this.family_address = address;
 
-                                        });
-                                    }
-                                    if (mid_left) {
-                                        mid_left.forEach(y => {
-                                            self.leftProperTitle.push(y.fam_name);
-                                        })
-                                    }
-                                    if (mid_right) {
-                                        mid_right.forEach(y => {
-                                            self.rightProperTitle.push(y.fam_name);
-                                        })
-                                    }
-                                    if (address) {
-                                        self.address = address;
-
-                                    }
-                                    //let left = []
-                                    if (left_items) {
-                                        left_items.forEach(y => {
-                                            self.alive.push(y.fam_name);
-                                        });
-                                    }
-                                }
-                            });
-                            this.render();
-                        }
-                    });
+                                if (mid_items) mid_items.forEach(y => this.properTitle.push(y.fam_name));
+                                if (mid_left) mid_left.forEach(y => this.leftProperTitle.push(y.fam_name));
+                                if (mid_right) mid_right.forEach(y => this.rightProperTitle.push(y.fam_name));
+                                if (address) this.address = address;
+                                if (left_items) left_items.forEach(y => this.alive.push(y.fam_name));
+                            }
+                        });
+                        this.render();
+                    }
+                });
             },
             async render() {
-
                 $(".printArea").empty();
                 $(".selectedItem").empty();
                 $(".canselectItem").empty();
-                let self = this;
-                self.tabletType = "A";
-                let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
-                let nowPageWidth = 0;
+                this.tabletType = "A";
+                let canvas = $(`<div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative"></div>`);
                 let tabletpaper;
-                //列印紙張的尺寸
 
-                let mid = [];
-                Object.assign(mid, self.properTitle);
-                let left = []
-                Object.assign(left, self.alive);
+                let mid = [...this.properTitle];
+                let left = [...this.alive];
+                let ltitle = [...this.leftProperTitle];
+                let rtitle = [...this.rightProperTitle];
+                let myAddress = this.address != "" ? [this.address] : [];
 
-                let ltitle = [];
-                let rtitle = [];
-                let myAddress = [];
-                Object.assign(ltitle, self.leftProperTitle);
-                Object.assign(rtitle, self.rightProperTitle);
-                if (self.address != "") {
-                    myAddress.push(self.address)
+                let x = this.selectStyle;
+                let style = this.allStyle.find(y => y.styleID == (x.style ? x.style : $("#styleSel").val()));
+                if (!x.style) {
+                    this.selectStyle.style = style.styleID;
+                    this.selected.style = style.styleID;
                 }
 
-                //this.printData.forEach(x => {
-                let x = self.selectStyle;
-                let style = self.allStyle.find(y => y.styleID == (x.style ? x.style : $("#styleSel").val()));
-                //console.log("style:",style)
-                if (x.style) {
-
-                } else {
-                    self.selectStyle.style = style.styleID;
-                    self.selected.style = style.styleID;
-                }
-
-                //用來印內容的尺寸
-                let size = self.allSize.find(y => y.paperID == style.paperSize);
-                let pageSize = self.allSize.find(y => y.paperID == style.paperSize);
-                //包含空白用來折的尺寸
-                let printSize = self.allSize.find(y => y.paperID == style.printSize);
-                tabletpaper = $(` <div class="tablet-paper" style="transform-origin:top left;transform:scale(${this.zoomScale})"></div>`)
-                let img = self.bg.find(y => y.name == style.backendImg);
+                let size = this.allSize.find(y => y.paperID == style.paperSize);
+                let pageSize = this.allSize.find(y => y.paperID == style.paperSize);
+                let printSize = this.allSize.find(y => y.paperID == style.printSize);
+                tabletpaper = $(`<div class="tablet-paper" style="transform-origin:top left;transform:scale(${this.zoomScale})"></div>`);
+                let img = this.bg.find(y => y.name == style.backendImg);
                 let details = this.allStyleDetails.filter(y => y.styleID == style.styleID);
                 let ancestorFontSize = 16;
 
                 details.forEach(d => {
                     if (d.isActive != "hidden") {
-                        let element = self.tabletElement.find(y => y.elementID == d.elementID);
-
-                        let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
+                        let element = this.tabletElement.find(y => y.elementID == d.elementID);
+                        let newFontSize = this.scaleFontSize(mid, d.fontSize, d.width);
                         let html = "";
-                        let alive = "";
-                        let yang = "";
-                        let bi = "";
 
                         if (d.elementID === 'title1') {
-                            if (mid.length == 0) {
-                                mid.push("請選擇")
-                            }
-                            // 1. 依據 textHeight 與 textSpan 計算一行(垂直列)最多能放幾個名字
-
+                            if (mid.length == 0) mid.push("請選擇");
                             let th = Number(d.textHeight) || 0;
                             let span = Number(d.textSpan) || 0;
-                            let h = Number(d.height);
-                            let w = Number(d.width);
-
-                            let namesPerCol = Math.floor((h + span) / (th + span));
-                            if (namesPerCol < 1) namesPerCol = 1;
-
-                            // 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
-                            let cols = Math.ceil(mid.length / namesPerCol);
-                            if (cols < 1) cols = 1;
-                            let colWidth = Math.floor(w / cols);
-                            //console.log(perRow, rows, rowWidth, newFontSize)
-                            html = self.renderNameList(mid, d, newFontSize, style, colWidth);
+                            let namesPerCol = Math.max(1, Math.floor((Number(d.height) + span) / (th + span)));
+                            let cols = Math.max(1, Math.ceil(mid.length / namesPerCol));
+                            let colWidth = Math.floor(Number(d.width) / cols);
+                            html = this.renderNameList(mid, d, newFontSize, style, colWidth);
                         } else if (d.elementID === "alive") {
-                            self.tabletType = "B";
-                            if (left.length == 0) {
-                                left.push("請選擇");
-                            }
-                            newFontSize =d.fontSize //self.scaleFontSize(left, d.fontSize, d.Width);
-
-                            //html = self.renderLiveList(left, d, rowWidth);
+                            this.tabletType = "B";
+                            if (left.length == 0) left.push("請選擇");
+                            newFontSize = d.fontSize;
                             html = this.renderLiveList(left, d);
-
                         } else if (d.elementID === "titletriangle") {
-                            if (mid.length == 0) {
-                                mid.push("請選擇")
-                            }
-                            html = self.renderRoster(mid, d)
+                            if (mid.length == 0) mid.push("請選擇");
+                            html = this.renderRoster(mid, d);
                         } else if (d.elementID === "combined" || d.elementID === "tricombined") {
                             ancestorFontSize = d.fontSize;
-                            if (mid.length == 0) {
-                                mid.push("請選擇")
-                            }
-                            html = self.renderCombined(mid, d);
-
+                            if (mid.length == 0) mid.push("請選擇");
+                            html = this.renderCombined(mid, d);
                         } else if (d.elementID === "lefttitle") {
-                            if (ltitle.length == 0) {
-                                ltitle.push("請選擇")
-                            }
-                            html = self.renderNormalWithSpace(ltitle, d)
+                            if (ltitle.length == 0) ltitle.push("請選擇");
+                            html = this.renderNormalWithSpace(ltitle, d);
                         } else if (d.elementID === "righttitle") {
-                            if (rtitle.length == 0) {
-                                rtitle.push("請選擇")
-                            }
-                            html = self.renderNormalWithSpace(rtitle, d)
+                            if (rtitle.length == 0) rtitle.push("請選擇");
+                            html = this.renderNormalWithSpace(rtitle, d);
                         } else if (d.elementID == "address") {
-                            if (myAddress.length == 0) {
-                                myAddress.push("請選擇")
-                            }
-                            html = self.renderNormal(myAddress.join(""), d)
+                            if (myAddress.length == 0) myAddress.push("請選擇");
+                            html = this.renderNormal(myAddress.join(""), d);
                         }
-                        if (newFontSize < 10) {
-                            newFontSize = 10;
-                        }
-                   
-                        let content = $(`<div class="tablet-element vertical-text ">${element.sampleContent}</div>`)
-                            .css({
-                                position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'px',
-                                fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
-                                "align-items": "center"
 
-                            })
-                            .html(html);
+                        if (newFontSize < 10) newFontSize = 10;
+
+                        let content = $(`<div class="tablet-element vertical-text ">${element.sampleContent}</div>`).css({
+                            position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'px',
+                            fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive, "align-items": "center"
+                        }).html(html);
                         tabletpaper.append(content);
-                        html = "";
-                        alive = "";
-                        yang = "";
-                        bi = "";
-
-
                     }
                 });
-                self.pageStyle = `<style id="pageStyle">
-                                                    {
-                                                        -webkit-print-color-adjust: exact !important;
-                                                        print-color-adjust: exact !important;
-                                                        color-adjust: exact !important;
-                                                    }
-                                                    .vertical-text {
-                                                        writing-mode: vertical-rl !important;
-                                                        -webkit-writing-mode: vertical-rl !important;
-                                                        text-orientation: mixed !important;
-                                                    }
-                                                    body{
-                                                        overflow: visible !important;
-                                                    }
 
-                                                    @media print{
-                                                        :host {
-                                                            width:auto !important;
-                                                            height:auto !important;
-                                                        }
-                                                        @page {
-                                                            size:${printSize.width}mm ${printSize.height}mm   !important;
-                                                            margin:0;
-                                                        }
-                                                        html, body, form, .full-home, .printArea, .canvas-area {
-                                                            height: auto !important;
-                                                            width: auto !important;
-                                                            overflow: visible !important;  /*必須為 visible */
-                                                            margin: 0 !important;
-                                                            padding: 0 !important;
-                                                            display: block !important;
-                                                        }
-                                                        .no-print, #customMenu {
-                                                            display: none !important;
-                                                        }
+                let pageStyle = `<style id="pageStyle">
+                        * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
+                        .vertical-text { writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; text-orientation: mixed !important; }
+                        body { overflow: visible !important; }
+                        @media print {
+                            :host { width:auto !important; height:auto !important; }
+                            @page { size:${printSize.width}mm ${printSize.height}mm !important; margin:0; }
+                            html, body, form, .full-home, .printArea, .canvas-area { height: auto !important; width: auto !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; display: block !important; }
+                            .no-print, #customMenu { display: none !important; }
+                            .canvas-area { display:flex !important; flex-direction: row !important; justify-content:center !important; align-items:center !important; }
+                            .tablet-paper { position: relative !important; display: block !important; break-inline:avoid; page-break-inline:avoid; break-after: page !important; page-break-after: always !important; margin: 0 !important; border: none !important; background-repeat: no-repeat; background-size: 100% 100%; }
+                            .tablet-element { position: absolute !important; white-space: normal; color: black !important; }
+                        }
+                        .roster-container { width: 100%; height: 100%; writing-mode: vertical-rl; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; }
+                        .roster-row { display: flex; flex-direction: row-reverse; justify-content: center; gap: 8px; margin-left: 10px; }
+                        .name-group { display: flex; flex-direction: column; justify-content: center; align-items: center; }
+                        .roster-name { text-orientation: upright; white-space: normal; line-height: 1.2; font-family: DFKai-sb; width: fit-content; }
+                        .ancestor-wrapper { writing-mode: horizontal-tb; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: fit-content; }
+                        .main-name { line-height: 1.2; }
+                        .sub-text { font-size: ${ancestorFontSize}px; line-height: 1.2; margin-top: 4px; white-space: normal; writing-mode:vertical-rl; }
+                        .canvas-area { width: ${pageSize.width}mm; height: ${pageSize.height}mm; break-after: page; page-break-after: always; display:flex !important; justify-content:center; }
+                        .tablet-paper { background-color: white; display: inline-block; width: ${size.width}mm !important; height: ${size.height}mm !important; position: relative; margin-bottom: 0; background-image: url(${img.path}); background-size: 100% 100%; break-inline:avoid; page-break-inline:avoid; }
+                        .tablet-element { cursor: move; padding: 4px; color: black !important; border: 1px solid transparent; transition: writing-mode 0.3s, transform 0.2s; }
+                        .tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
+                        .tablet-paper:last-child { page-break-after: auto; }
+                        .tablet-element span { z-index: 999; }
+                        .selectedItem .canselectItem { font-size: 18px; }
+                        .selectedItem, .rounded-pill .canselectItem, .rounded-pill { font-size: 12px; }
+                    </style>`;
 
-
-                                                        .canvas-area{
-                                                            display:flex !important;
-
-                                                            flex-direction: row !important;
-                                                            justify-content:center !important;
-                                                            align-items:center !important;
-
-                                                        }
-
-                                                        .tablet-paper {
-                                                            position: relative !important;
-                                                            display: block !important;
-                                                            break-inline:avoid;
-                                                            page-break-inline:avoid;
-                                                            break-after: page !important;
-                                                            page-break-after: always !important;
-                                                            margin: 0 !important;
-                                                            border: none !important;
-                                                            background-repeat: no-repeat;
-                                                            background-size: 100% 100%;
-                                                        }
-
-                                                        .tablet-element {
-                                                            position: absolute !important;
-                                                            white-space: normal;
-                                                            color: black !important; /* 確保文字是黑色的 */
-                                                        }
-
-                                                    }
-
-                                                    /* 名單金字塔佈局容器 */
-                                                    .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: normal;
-                                                        line-height: 1.2;
-                                                        font-family: DFKai-sb;
-                                                        /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
-                                                        width: fit-content;
-                                                    }
-
-                                                    /* 【修復底圖沒出現】強制印出背景設定 */
-                                                    * {
-                                                        -webkit-print-color-adjust: exact !important;
-                                                        print-color-adjust: exact !important;
-                                                        color-adjust: exact !important;
-                                                    }
-                                                     .ancestor-wrapper {
-                                                        /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
-                                                        writing-mode: horizontal-tb;
-                                                        display: flex;
-                                                        flex-direction: column;
-                                                        align-items: center; /* 水平置中 */
-                                                        justify-content: felx-start;
-                                                        width: fit-content;
-                                                    }
-
-                                                    .main-name {
-                                                        line-height: 1.2;
-                                                        /* 保持大字 */
-                                                    }
-
-                                                    .sub-text {
-                                                        font-size: ${ancestorFontSize}px ;/*0.8em;*/ /* 縮小字體 */
-                                                        line-height: 1.2;
-                                                        margin-top: 4px; /* 與上方林張的間距 */
-                                                        white-space: normal; /* 避免自動換行 */
-                                                        writing-mode:vertical-rl
-                                                    }
-
-                                                    .canvas-area{
-                                                        width: ${pageSize.width}mm;
-                                                        height: ${pageSize.height}mm;
-                                                        break-after: page;
-                                                        page-break-after: always;
-                                                        display:flex !important;
-                                                        justify-content:center;
-
-                                                    }
-
-                                                    .tablet-paper{
-                                                        background-color: white;
-                                                        display: inline-block;
-                                                        width: ${size.width}mm !important;
-                                                        height: ${size.height}mm !important;
-                                                        position: relative;
-                                                        margin-bottom: 0;
-                                                        background-image: url(${img.path});
-                                                        background-size: 100% 100%;
-                                                        break-inline:avoid;
-                                                        page-break-inline:avoid;
-                                                    }
-                                                    .tablet-element {
-                                                      cursor: move;
-                                                      padding: 4px;
-                                                      color: black !important; /* 強制墨水為黑色 */
-                                                      border: 1px solid transparent;
-                                                      transition: writing-mode 0.3s, transform 0.2s;
-                                                    }
-                                                    .tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
-                                                    .tablet-paper:last-child { page-break-after: auto; }
-
-                                                    .tablet-element span{
-                                                        z-index: 999;
-                                                    }
-
-                                                    .selectedItem .canselectItem{
-                                                        font-size: 18px;
-                                                    }
-                                                    .selectedItem,.rounded-pill .canselectItem,.rounded-pill{
-                                                        font-size: 12px;
-                                                    }
-                                                    </style>
-                                                    `
                 $("#pageStyle").remove();
-                $("head").append(self.pageStyle);
+                $("head").append(pageStyle);
                 $(canvas).append(tabletpaper);
                 $(".printArea").append(canvas);
 
-                $(".tablet-element").on("click", function (e) {
+                $(".tablet-element").on("click", (e) => {
                     e.preventDefault();
-                    self.selectedElement = $(this);
-                    let element = $(this).children().first();
-                    self.renderItem(element);
+                    this.selectedElement = $(e.currentTarget);
+                    let element = $(e.currentTarget).children().first();
+                    this.renderItem(element);
                 });
             },
             async renderItem(element) {
-                let self = this;
                 $(".selectedItem").empty();
                 $(".canselectItem").empty();
 
-                if (element.hasClass("liveList")) {//陽上
-                    //抓未往生的人出來
-                    //self.familyMembers;
-                    self.alive.forEach(x => {
-                        let f = self.familyMembers.find(z => z.fam_name == x);
-                        
+                if (element.hasClass("liveList")) {
+                    this.alive.forEach(x => {
+                        let f = this.familyMembers.find(z => z.fam_name == x);
                         $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                                            <span class="selected">${x}</span>
-                                            <span>
-                                            <i class="rounded-pill rounded-3   ${(f && f.fam_title && f.fam_title != '' && f.fam_title != null) ? 'p-1' : ''}" style="background-color:lightgray">
-                                            ${(f && f.fam_title != null) ? f.fam_title : ""}</i>
-                                            </span>
-                                            <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>
-                                            <span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">&#8593;</span>
-                                            <span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
-                    });
-                    let items = []
-                    self.familyMembers.forEach(x => {
-                        if (x.deceased == false)
-                            items.push(x.fam_name);
-                    });
-                    let finalItem = items.filter(y => !self.alive.includes(y))
-                    finalItem.forEach(yy => {
-                        let f = self.familyMembers.find(z => z.fam_name == yy);
-                        $(".canselectItem").append(`<li><span  style="opacity:0.5">卍</span> 
-                        <span class="unselect">${yy}</span>
-                        <span>
-                        <i class="rounded-pill rounded-3 ${(f && f.fam_title && f.fam_title != ''&&f.fam_title!=null) ? 'p-1':''}" style="background-color:lightgray">
-                        ${(f && f.fam_title != null) ? f.fam_title : ""}</i>
-                        </span>
-                        <span class='itemAppend' style="float:right;cursor:pointer;">&#43;<span></li>`);
+                                                <span class="selected">${x}</span>
+                                                <span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
+                                                <span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">&minus;</span>
+                                                <span class="itemUp" style="float:right;margin-left:2rem;cursor:pointer;">&#8593;</span>
+                                                <span class="itemDown" style="float:right;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
                     });
 
-                } else if (element.hasClass("address")) {//地址
-                    //console.log(self.address);
+                    let items = this.familyMembers.filter(x => x.deceased == false).map(x => x.fam_name);
+                    let finalItem = items.filter(y => !this.alive.includes(y));
+
+                    finalItem.forEach(yy => {
+                        let f = this.familyMembers.find(z => z.fam_name == yy);
+                        $(".canselectItem").append(`<li><span style="opacity:0.5">卍</span> <span class="unselect">${yy}</span>
+                            <span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
+                            <span class='itemAppend' style="float:right;cursor:pointer;">&#43;</span></li>`);
+                    });
+                } else if (element.hasClass("address")) {
                     $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                             <span class="selected">${self.address==undefined?"":self.address}</span>
-                             <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
-                } else if (element.hasClass("lefttitle")) {//左正名
-                    self.leftProperTitle.forEach(x => {
-                        let f = self.familyMembers.find(z => z.fam_name == x);
-                    $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                             <span class="selected">${x}</span>
-                            <span>
-                            <i class="rounded-pill rounded-3  ${(f && f.fam_title && f.fam_title != '' && f.fam_title != null) ? 'p-1' : ''}" style="background-color:lightgray">
-                            ${(f && f.fam_title != null) ? f.fam_title : ""}</i>
-                            </span>
-                             <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
-                    })
-                        let items = [];
-                    self.familyMembers.forEach(x => {
-                        if (self.tabletType == "A" && x.deceased == false) {
-                            items.push(x.fam_name);
-                        } else if (self.tabletType == "B" && x.deceased == true) {
-                            items.push(x.fam_name);
-                        }
+                                 <span class="selected">${this.address == undefined ? "" : this.address}</span>
+                                 <span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">&minus;</span>`);
+                } else if (element.hasClass("lefttitle")) {
+                    this.leftProperTitle.forEach(x => {
+                        let f = this.familyMembers.find(z => z.fam_name == x);
+                        $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span><span class="selected">${x}</span>
+                                <span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
+                                <span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">&minus;</span>`);
                     });
-                    let finalItem = items.filter(y => !self.leftProperTitle.includes(y))
-                    finalItem.forEach(yy => {
-                        let f = self.familyMembers.find(z => z.fam_name == yy);
-                        $(".canselectItem").append(`<li><span  style="opacity:0.5">卍</span> 
-                        <span class="unselect">${yy}</span>
-                        <span>
-                        <i class="rounded-pill rounded-3  ${(f && f.fam_title && f.fam_title != '' && f.fam_title != null) ? 'p-1' : ''}" style="background-color:lightgray">
-                        ${(f && f.fam_title != null) ? f.fam_title : ""}</i>
-                        </span>
-                        <span class='itemAppend' style="float:right;cursor:pointer;">&#43;<span></li>`);
-                    });
-                } else if (element.hasClass("righttitle")) {//右正名
-                    self.rightProperTitle.forEach(x => {
-                        let f = self.familyMembers.find(z => z.fam_name == x);
-                        $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                        <span class="selected">${x}</span>
-                        <span>
-                        <i class="rounded-pill rounded-3  ${(f && f.fam_title && f.fam_title != '' && f.fam_title != null) ? 'p-1' : ''}" style="background-color:lightgray">
-                        ${(f && f.fam_title != null) ? f.fam_title : ""}</i>
-                        </span>
-                        <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>`);
-                    })
-                    let items = [];
-                    self.familyMembers.forEach(x => {
-                        if (self.tabletType == "A" && x.deceased == false) {
-                            items.push(x.fam_name);
-                        } else if (self.tabletType == "B" && x.deceased == true) {
-                            items.push(x.fam_name);
-                        }
-                    });
-                    let finalItem = items.filter(y => !self.rightProperTitle.includes(y))
-                    finalItem.forEach(yy => {
-                        let f=self.familyMembers.find(z=>z.fam_name==yy);
-                        $(".canselectItem").append(`<li><span  style="opacity:0.5">卍</span> 
-                        <span class="unselect">${yy}</span>
-                        <span>
-                        <i class="rounded-pill rounded-3  ${(f && f.fam_title && f.fam_title != '' && f.fam_title != null) ? 'p-1' : ''}" style="background-color:lightgray">
-                        ${(f && f.fam_title != null) ? f.fam_title : ""}</i>
-                        </span>
-                        <span class='itemAppend' style="float:right;cursor:pointer;">&#43;<span></li>`);
-                    });
-                } else {//其他都是正名
 
-                    if (element.hasClass("ancestor-wrapper")) {//多姓氏合併，只允許用打的
-                        self.properTitle.forEach(y => {
-                            let f = self.familyMembers.find(z => z.fam_name == y);
-                            $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                                             <span class="selected">${y}</span>
-                                             <span>
-                                            <i class="rounded-pill rounded-3  ${(f && f.fam_title && f.fam_title != '' && f.fam_title != null) ? 'p-1' : ''}" style="background-color:lightgray">
-                                            ${(f && f.fam_title != null) ? f.fam_title : ""}</i>
-                                            </span>
-                                             <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>
-                                             <span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">&#8593;</span>
-                                             <span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
-                        });
-                    } else if (element.hasClass("nameList") || element.hasClass("rosterList")) {//
+                    let items = this.familyMembers.filter(x => (this.tabletType == "A" && x.deceased == false) || (this.tabletType == "B" && x.deceased == true)).map(x => x.fam_name);
+                    let finalItem = items.filter(y => !this.leftProperTitle.includes(y));
 
-                        self.properTitle.forEach(y => {
-                            let f = self.familyMembers.find(z => z.fam_name == y);
-                            $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span>
-                                             <span class="selected">${y}</span>
-                                             <span>
-                                            <i class="rounded-pill rounded-3  ${(f && f.fam_title && f.fam_title != '' && f.fam_title != null) ? 'p-1' : ''}" style="background-color:lightgray">
-                                            ${(f && f.fam_title != null) ? f.fam_title : ""}</i>
-                                            </span>
-                                             <span class="itemRemove" style="float:right ;margin-left:2rem;cursor:pointer;" >&minus;</span>
-                                             <span class="itemUp" style="float:right ;margin-left:2rem;cursor:pointer;">&#8593;</span>
-                                             <span class="itemDown" style="float:right ;margin-left:2rem;cursor:pointer;">&#8595;</span></li>`);
-                        })
-                        let items = []
-                        self.familyMembers.forEach(x => {
-                            if (self.tabletType == "A" && x.deceased == false) {
-                                items.push(x.fam_name);
-                            } else if (self.tabletType == "B" && x.deceased == true) {
-                                items.push(x.fam_name);
-                            }
-                        });
-                        let finalItem = items.filter(y => !self.properTitle.includes(y))
+                    finalItem.forEach(yy => {
+                        let f = this.familyMembers.find(z => z.fam_name == yy);
+                        $(".canselectItem").append(`<li><span style="opacity:0.5">卍</span> <span class="unselect">${yy}</span>
+                            <span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
+                            <span class='itemAppend' style="float:right;cursor:pointer;">&#43;</span></li>`);
+                    });
+                } else if (element.hasClass("righttitle")) {
+                    this.rightProperTitle.forEach(x => {
+                        let f = this.familyMembers.find(z => z.fam_name == x);
+                        $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span><span class="selected">${x}</span>
+                            <span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
+                            <span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">&minus;</span>`);
+                    });
+
+                    let items = this.familyMembers.filter(x => (this.tabletType == "A" && x.deceased == false) || (this.tabletType == "B" && x.deceased == true)).map(x => x.fam_name);
+                    let finalItem = items.filter(y => !this.rightProperTitle.includes(y));
+
+                    finalItem.forEach(yy => {
+                        let f = this.familyMembers.find(z => z.fam_name == yy);
+                        $(".canselectItem").append(`<li><span style="opacity:0.5">卍</span> <span class="unselect">${yy}</span>
+                            <span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
+                            <span class='itemAppend' style="float:right;cursor:pointer;">&#43;</span></li>`);
+                    });
+                } else {
+                    let hasControls = !element.hasClass("ancestor-wrapper");
+                    this.properTitle.forEach(y => {
+                        let f = this.familyMembers.find(z => z.fam_name == y);
+                        let controlHtml = hasControls ? `<span class="itemUp" style="float:right;margin-left:2rem;cursor:pointer;">&#8593;</span><span class="itemDown" style="float:right;margin-left:2rem;cursor:pointer;">&#8595;</span>` : '';
+                        $(".selectedItem").append(`<li><span style="opacity:0.5">卍</span><span class="selected">${y}</span>
+                                <span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
+                                <span class="itemRemove" style="float:right;margin-left:2rem;cursor:pointer;">&minus;</span>${controlHtml}</li>`);
+                    });
+
+                    if (hasControls) {
+                        let items = this.familyMembers.filter(x => (this.tabletType == "A" && x.deceased == false) || (this.tabletType == "B" && x.deceased == true)).map(x => x.fam_name);
+                        let finalItem = items.filter(y => !this.properTitle.includes(y));
                         finalItem.forEach(yy => {
-                            let f = self.familyMembers.find(z => z.fam_name == yy);
-                            $(".canselectItem").append(`<li><span  style="opacity:0.5">卍</span> 
-                            <span class="unselect">${yy}</span>
-                            <span>
-                            <i class="rounded-pill rounded-3  ${(f && f.fam_title && f.fam_title != '' && f.fam_title != null) ? 'p-1' : ''}" style="background-color:lightgray">
-                            ${(f && f.fam_title != null) ? f.fam_title : ""}</i>
-                            </span>
-                            <span class='itemAppend' style="float:right;cursor:pointer;">&#43;<span></li>`);
+                            let f = this.familyMembers.find(z => z.fam_name == yy);
+                            $(".canselectItem").append(`<li><span style="opacity:0.5">卍</span> <span class="unselect">${yy}</span>
+                                <span><i class="rounded-pill rounded-3 ${(f && f.fam_title) ? 'p-1' : ''}" style="background-color:lightgray">${(f && f.fam_title) ? f.fam_title : ""}</i></span>
+                                <span class='itemAppend' style="float:right;cursor:pointer;">&#43;</span></li>`);
                         });
                     }
                 }
-
-                self.bindEvent();
+                this.bindEvent();
             },
-            async addNewItem() {//已選輸入框按加號
-                //console.log("addNewItem:",$("#custom_txt").val())
-                if ($("#custom_txt").val()=="") {
-
-                    alert("名稱不可空白")
-                    return false
+            async addNewItem() {
+                let customVal = $("#custom_txt").val();
+                if (customVal == "") {
+                    alert("名稱不可空白");
+                    return false;
                 }
-               
 
-                let self = this;
-                let target = $(self.selectedElement).children().first();
-                let error=""
-                //let fam = self.familyMembers.find(x => x.fam_name == target.text());
+                let target = $(this.selectedElement).children().first();
+                let error = "";
+
                 if (target.hasClass("liveList")) {
-                    self.alive.forEach(x => {
-                        if (x == $("#custom_txt").val()) {
-                            error = "名稱已存在"
-                        }
-                    })
-                    if (error != "") {
-                        alert(error)
-                        return false
-                    }
-                    self.alive.push($("#custom_txt").val());
-                    let obj = {
-                        IsShuWen: false,
-                        deceased: false,
-                        fam_gender: "",
-                        fam_name: $("#custom_txt").val(),
-                        fam_file: "",
-                        nospace: true,
-                        num: 0,
-                        option_break: false
-                    }
-                    self.family_deceased_Y_selected.push(obj);
+                    if (this.alive.includes(customVal)) error = "名稱已存在";
+                    if (error) return alert(error), false;
+                    this.alive.push(customVal);
+                    this.family_deceased_Y_selected.push({ IsShuWen: false, deceased: false, fam_gender: "", fam_name: customVal, fam_file: "", nospace: true, num: 0, option_break: false });
                 } else if (target.hasClass("nameList") || target.hasClass("rosterList")) {
-                    self.properTitle.forEach(x => {
-                        if (x == $("#custom_txt").val()) {
-                            error = "名稱已存在"
-                        }
-                    })
-                    if (error != "") {
-                        alert(error)
-                        return false
-                    }
-                    self.properTitle.push($("#custom_txt").val());
-                    let obj = {
-                        IsShuWen: false,
-                        deceased: false,
-                        fam_gender: "",
-                        fam_name: $("#custom_txt").val(),
-                        fam_file: "",
-                        nospace: true,
-                        num: 0,
-                        option_break: false
-                    }
-                    self.family_deceased_N_selected.push(obj);
+                    if (this.properTitle.includes(customVal)) error = "名稱已存在";
+                    if (error) return alert(error), false;
+                    this.properTitle.push(customVal);
+                    this.family_deceased_N_selected.push({ IsShuWen: false, deceased: false, fam_gender: "", fam_name: customVal, fam_file: "", nospace: true, num: 0, option_break: false });
                 } else if (target.hasClass("ancestor-wrapper")) {
-                    //再來判斷是否已有這個名稱
-                    self.properTitle.forEach(x => {
-                        if (x == $("#custom_txt").val()) {
-                            error = "名稱已存在"
-                        }
-                    })
-                    if (error != "") {
-                        alert(error)
-                        return false
-                    }
-                    if (self.properTitle.length >= 2) {
+                    if (this.properTitle.includes(customVal)) error = "名稱已存在";
+                    if (error) return alert(error), false;
+                    if (this.properTitle.length >= 2) {
                         alert("多姓氏合併必須第一個名稱為姓，第二個名稱為氏歷代祖先之類，且最多兩個名稱");
                     } else {
-                        self.properTitle.push($("#custom_txt").val());
-                        let obj = {
-                            IsShuWen: false,
-                            deceased: false,
-                            fam_gender: "",
-                            fam_name: $("#custom_txt").val(),
-                            fam_file: "",
-                            nospace: true,
-                            num: 0,
-                            option_break: false
-                        }
-                        self.family_deceased_N_selected.push(obj);
+                        this.properTitle.push(customVal);
+                        this.family_deceased_N_selected.push({ IsShuWen: false, deceased: false, fam_gender: "", fam_name: customVal, fam_file: "", nospace: true, num: 0, option_break: false });
                     }
                 } else if (target.hasClass("lefttitle")) {
-                    self.leftProperTitle.forEach(x => {
-                        if (x == $("#custom_txt").val()) {
-                            error = "名稱已存在"
-                        }
-                    })
-                    if (error != "") {
-                        alert(error)
-                        return false
-                    }
-                    self.leftProperTitle.length = 0;
-                    self.family_left_title.length = 0;
-                    self.leftProperTitle.push($("#custom_txt").val());
-                    let obj = {
-                        IsShuWen: false,
-                        deceased: false,
-                        fam_gender: "",
-                        fam_name: $("#custom_txt").val(),
-                        fam_file: "",
-                        nospace: true,
-                        num: -1,
-                        option_break: false
-                    }
-                    self.family_left_title.push(obj);
-                    //self.family_deceased_N_selected.push(obj);
-                    //}
+                    if (this.leftProperTitle.includes(customVal)) error = "名稱已存在";
+                    if (error) return alert(error), false;
+                    this.leftProperTitle.length = 0;
+                    this.family_left_title.length = 0;
+                    this.leftProperTitle.push(customVal);
+                    this.family_left_title.push({ IsShuWen: false, deceased: false, fam_gender: "", fam_name: customVal, fam_file: "", nospace: true, num: -1, option_break: false });
                 } else if (target.hasClass("righttitle")) {
-                    self.rightProperTitle.forEach(x => {
-                        if (x == $("#custom_txt").val()) {
-                            error = "名稱已存在"
-                        }
-                    })
-                    if (error != "") {
-                        alert(error)
-                        return false
-                    }
-                    self.rightProperTitle.length = 0;
-                    self.family_right_title.length = 0;
-                    self.rightProperTitle.push($("#custom_txt").val());
-                    let obj = {
-                        IsShuWen: false,
-                        deceased: false,
-                        fam_gender: "",
-                        fam_name: $("#custom_txt").val(),
-                        fam_file: "",
-                        nospace: true,
-                        num: 0,
-                        option_break: false
-                    }
-                    self.family_right_title.push(obj);
-                    //self.family_deceased_N_selected.push(obj);
-                    //}
+                    if (this.rightProperTitle.includes(customVal)) error = "名稱已存在";
+                    if (error) return alert(error), false;
+                    this.rightProperTitle.length = 0;
+                    this.family_right_title.length = 0;
+                    this.rightProperTitle.push(customVal);
+                    this.family_right_title.push({ IsShuWen: false, deceased: false, fam_gender: "", fam_name: customVal, fam_file: "", nospace: true, num: 0, option_break: false });
                 } else if (target.hasClass("address")) {
-
-                    self.address = ($("#custom_txt").val());
-                    let obj = {
-                        IsShuWen: false,
-                        deceased: false,
-                        fam_gender: "",
-                        fam_name: $("#custom_txt").val(),
-                        fam_file: "",
-                        nospace: true,
-                        num: 0,
-                        option_break: false
-                    }
-                    self.family_address = self.address
-                    //self.family_deceased_N_selected.push(obj);
-
+                    this.address = customVal;
+                    this.family_address = this.address;
                 }
                 $("#custom_txt").val("");
-                self.renderItem($(self.selectedElement).children().first());
-                self.rerenderPart();
+                this.renderItem($(this.selectedElement).children().first());
+                this.rerenderPart();
             },
             async bindEvent() {
                 let self = this;
-                $(".itemAppend").off("click");
-                $(".itemRemove").off("click");
-                $(".itemUp").off("click");
-                $(".itemDown").off("click");
+                $(".itemAppend, .itemRemove, .itemUp, .itemDown").off("click");
+
                 $(".itemAppend").on("click", function (e) {
                     let curr = $(e.currentTarget.parentElement).find(".unselect").first();
                     let target = self.familyMembers.find(x => x.fam_name == curr.text());
-                    if (target) {//liveList nameList rosterList 要判斷yang_limit_count chao_limit_count
-                        if ($(self.selectedElement).children().first().hasClass("liveList")) {
-                            if (self.tabletItem.has_yang_limit && self.tabletItem.yang_limit_count > 0) {
-                                if (self.alive.length + 1 > self.tabletItem.yang_limit_count) {
-                                    $("#toast_body").html(`陽上人數不得超過${self.tabletItem.yang_limit_count}人`)
-                                    self.toast.show();
-                                    return
-                                }
+                    if (target) {
+                        let elClass = $(self.selectedElement).children().first();
+                        let obj = { IsShuWen: false, deceased: false, fam_gender: "", fam_name: target.fam_name, fam_file: "", nospace: true, num: target.num, option_break: false };
+
+                        if (elClass.hasClass("liveList")) {
+                            if (self.tabletItem.has_yang_limit && self.tabletItem.yang_limit_count > 0 && self.alive.length + 1 > self.tabletItem.yang_limit_count) {
+                                $("#toast_body").html(`陽上人數不得超過${self.tabletItem.yang_limit_count}人`); self.toast.show(); return;
                             }
                             self.alive.push(target.fam_name);
-                            let obj = {
-                                IsShuWen: false,
-                                deceased: false,
-                                fam_gender: "",
-                                fam_name: target.fam_name,
-                                fam_file: "",
-                                nospace: true,
-                                num: target.num,
-                                option_break: false
-                            }
                             self.family_deceased_Y_selected.push(obj);
-                        } else if ($(self.selectedElement).children().first().hasClass("nameList") ||
-                            $(self.selectedElement).children().first().hasClass("rosterList")) {
-
-                            if (self.tabletItem.has_chao_limit && self.tabletItem.chao_limit_count > 0) {
-                                if (self.properTitle.length + 1 > self.tabletItem.chao_limit_count) {
-                                    $("#toast_body").html(`祈福或超渡人數不得超過${self.tabletItem.chao_limit_count}人`)
-                                    self.toast.show();
-                                    return
-                                }
+                        } else if (elClass.hasClass("nameList") || elClass.hasClass("rosterList")) {
+                            if (self.tabletItem.has_chao_limit && self.tabletItem.chao_limit_count > 0 && self.properTitle.length + 1 > self.tabletItem.chao_limit_count) {
+                                $("#toast_body").html(`祈福或超渡人數不得超過${self.tabletItem.chao_limit_count}人`); self.toast.show(); return;
                             }
                             self.properTitle.push(target.fam_name);
-
-                            let obj = {
-                                IsShuWen: false,
-                                deceased: false,
-                                fam_gender: "",
-                                fam_name: target.fam_name,
-                                fam_file: "",
-                                nospace: true,
-                                num: target.num,
-                                option_break: false
-                            }
                             self.family_deceased_N_selected.push(obj);
-                        } else if ($(self.selectedElement).children().first().hasClass("lefttitle")) {
+                        } else if (elClass.hasClass("lefttitle")) {
                             self.leftProperTitle.push(target.fam_name);
-
-                            let obj = {
-                                IsShuWen: false,
-                                deceased: false,
-                                fam_gender: "",
-                                fam_name: target.fam_name,
-                                fam_file: "",
-                                nospace: true,
-                                num: target.num,
-                                option_break: false
-                            }
                             self.family_left_title.push(obj);
-                        } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
+                        } else if (elClass.hasClass("righttitle")) {
                             self.rightProperTitle.push(target.fam_name);
-
-                            let obj = {
-                                IsShuWen: false,
-                                deceased: false,
-                                fam_gender: "",
-                                fam_name: target.fam_name,
-                                fam_file: "",
-                                nospace: true,
-                                num: target.num,
-                                option_break: false
-                            }
                             self.family_right_title.push(obj);
                         }
                     }
-                    self.renderItem($(self.selectedElement).children().first())
+                    self.renderItem($(self.selectedElement).children().first());
                     self.rerenderPart();
                 });
 
                 $(".itemRemove").on("click", function (e) {
-                    let curr = $(e.currentTarget.parentElement).find(".selected").first();
-                    if ($(self.selectedElement).children().first().hasClass("liveList")) {
-                        self.alive = self.alive.filter(x => x !== curr.text());
-                        self.family_deceased_Y_selected = self.family_deceased_Y_selected.filter(x => x.fam_name != curr.text());
-                    } else if ($(self.selectedElement).children().first().hasClass("nameList") ||
-                        $(self.selectedElement).children().first().hasClass("rosterList")) {
-                        self.properTitle = self.properTitle.filter(x => x !== curr.text());
-                        self.family_deceased_N_selected = self.family_deceased_N_selected.filter(x => x.fam_name != curr.text());
-                    } else if ($(self.selectedElement).children().first().hasClass("ancestor-wrapper")) {//
-                        self.properTitle = self.properTitle.filter(x => x !== curr.text());
-                        self.family_deceased_N_selected = self.family_deceased_N_selected.filter(x => x.fam_name != curr.text());
-                    } else if ($(self.selectedElement).children().first().hasClass("address")) {
-                        self.address = curr.text();
-                        self.family_address = curr.text()
-                    } else if ($(self.selectedElement).children().first().hasClass("lefttitle")) {
-                        self.leftProperTitle = self.leftProperTitle.filter(x => x !== curr.text());
-                        self.family_left_title = self.family_left_title = (x => x.fam_name !== curr.text());
-                    } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
-                        self.rightProperTitle = self.rightProperTitle.filter(x => x !== curr.text());
-                        self.family_right_title = self.family_right_title = (x => x.fam_name !== curr.text());
+                    let currName = $(e.currentTarget.parentElement).find(".selected").first().text();
+                    let elClass = $(self.selectedElement).children().first();
+
+                    if (elClass.hasClass("liveList")) {
+                        self.alive = self.alive.filter(x => x !== currName);
+                        self.family_deceased_Y_selected = self.family_deceased_Y_selected.filter(x => x.fam_name != currName);
+                    } else if (elClass.hasClass("nameList") || elClass.hasClass("rosterList") || elClass.hasClass("ancestor-wrapper")) {
+                        self.properTitle = self.properTitle.filter(x => x !== currName);
+                        self.family_deceased_N_selected = self.family_deceased_N_selected.filter(x => x.fam_name != currName);
+                    } else if (elClass.hasClass("address")) {
+                        self.address = currName; self.family_address = currName;
+                    } else if (elClass.hasClass("lefttitle")) {
+                        self.leftProperTitle = self.leftProperTitle.filter(x => x !== currName);
+                        self.family_left_title = self.family_left_title.filter(x => x.fam_name !== currName);
+                    } else if (elClass.hasClass("righttitle")) {
+                        self.rightProperTitle = self.rightProperTitle.filter(x => x !== currName);
+                        self.family_right_title = self.family_right_title.filter(x => x.fam_name !== currName);
                     }
                     self.renderItem($(self.selectedElement).children().first());
                     self.rerenderPart();
                 });
 
                 $(".itemUp").on("click", function (e) {
-                    let curr = $(e.currentTarget.parentElement).find(".selected").first();
-                    if ($(self.selectedElement).children().first().hasClass("liveList")) {
-                        let index = self.alive.indexOf(curr.text());
-                        if (index == 0) {
+                    let currName = $(e.currentTarget.parentElement).find(".selected").first().text();
+                    let elClass = $(self.selectedElement).children().first();
 
-                        } else {
-                            [self.alive[index - 1], self.alive[index]] = [self.alive[index], self.alive[index - 1]];
-                            [self.family_deceased_Y_selected[index - 1], self.family_deceased_Y_selected[index]] =
-                                [self.family_deceased_Y_selected[index], self.family_deceased_Y_selected[index - 1]];
-                        }
-                    } else if ($(self.selectedElement).children().first().hasClass("nameList") ||
-                        $(self.selectedElement).children().first().hasClass("rosterList")) {
-                        let index = self.properTitle.indexOf(curr.text());
-                        if (index == 0) {
+                    const swap = (arr, i) => { if (i > 0) [arr[i - 1], arr[i]] = [arr[i], arr[i - 1]]; };
 
-                        } else {
-                            [self.properTitle[index - 1], self.properTitle[index]] = [self.properTitle[index], self.properTitle[index - 1]];
-                            [self.family_deceased_N_selected[index - 1], self.family_deceased_N_selected[index]] =
-                                [self.family_deceased_N_selected[index], self.family_deceased_N_selected[index - 1]];
-                        }
-                    } else if ($(self.selectedElement).children().first().hasClass("ancestor-wrapper")) {
-                        let index = self.properTitle.indexOf(curr.text());
-                        if (index == 0) {
-
-                        } else {
-                            [self.properTitle[index - 1], self.properTitle[index]] = [self.properTitle[index], self.properTitle[index - 1]];
-                            [self.family_deceased_N_selected[index - 1], self.family_deceased_N_selected[index]] =
-                                [self.family_deceased_N_selected[index], self.family_deceased_N_selected[index - 1]];
-                        }
-                    } else if ($(self.selectedElement).children().first().hasClass("address")) {
-                        //self.address = curr.text();
-                    } else if ($(self.selectedElement).children().first().hasClass("lefttitle")) {
-                        let index = self.leftProperTitle.indexOf(curr.text());
-                        if (index == 0) {
-
-                        } else {
-                            [self.leftProperTitle[index - 1], self.leftProperTitle[index]] = [self.leftProperTitle[index], self.properTitle[index - 1]];
-                            [self.family_left_title[index - 1], self.family_left_title[index]] =
-                                [self.family_left_title[index], self.family_left_title[index - 1]];
-                        }
-                    } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
-                        let index = self.rightProperTitle.indexOf(curr.text());
-                        if (index == 0) {
-
-                        } else {
-                            [self.rightProperTitle[index - 1], self.rightProperTitle[index]] = [self.rightProperTitle[index], self.properTitle[index - 1]];
-                            [self.family_right_title[index - 1], self.family_right_title[index]] =
-                                [self.family_right_title[index], self.family_right_title[index - 1]];
-                        };
+                    if (elClass.hasClass("liveList")) {
+                        let idx = self.alive.indexOf(currName);
+                        swap(self.alive, idx); swap(self.family_deceased_Y_selected, idx);
+                    } else if (elClass.hasClass("nameList") || elClass.hasClass("rosterList") || elClass.hasClass("ancestor-wrapper")) {
+                        let idx = self.properTitle.indexOf(currName);
+                        swap(self.properTitle, idx); swap(self.family_deceased_N_selected, idx);
+                    } else if (elClass.hasClass("lefttitle")) {
+                        let idx = self.leftProperTitle.indexOf(currName);
+                        swap(self.leftProperTitle, idx); swap(self.family_left_title, idx);
+                    } else if (elClass.hasClass("righttitle")) {
+                        let idx = self.rightProperTitle.indexOf(currName);
+                        swap(self.rightProperTitle, idx); swap(self.family_right_title, idx);
                     }
                     self.renderItem($(self.selectedElement).children().first());
                     self.rerenderPart();
                 });
+
                 $(".itemDown").on("click", function (e) {
-                    let curr = $(e.currentTarget.parentElement).find(".selected").first();
-                    if ($(self.selectedElement).children().first().hasClass("liveList")) {
-                        let index = self.alive.indexOf(curr.text());
-                        if (index == self.alive.length - 1) {
+                    let currName = $(e.currentTarget.parentElement).find(".selected").first().text();
+                    let elClass = $(self.selectedElement).children().first();
 
-                        } else {
-                            [self.alive[index], self.alive[index + 1]] = [self.alive[index + 1], self.alive[index]];
-                            [self.family_deceased_Y_selected[index], self.family_deceased_Y_selected[index + 1]] =
-                                [self.family_deceased_Y_selected[index + 1], self.family_deceased_Y_selected[index]];
-                        }
-                    } else if ($(self.selectedElement).children().first().hasClass("nameList") ||
-                        $(self.selectedElement).children().first().hasClass("rosterList")) {
-                        let index = self.properTitle.indexOf(curr.text());
-                        if (index == self.properTitle.length - 1) {
+                    const swap = (arr, i) => { if (i > -1 && i < arr.length - 1) [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]]; };
 
-                        } else {
-                            [self.properTitle[index], self.properTitle[index + 1]] = [self.properTitle[index + 1], self.properTitle[index]];
-                            [self.family_deceased_N_selected[index], self.family_deceased_N_selected[index + 1]] =
-                                [self.family_deceased_N_selected[index + 1], self.family_deceased_N_selected[index]];
-                        }
-                    } else if ($(self.selectedElement).children().first().hasClass("ancestor-wrapper")) {
-                        let index = self.properTitle.indexOf(curr.text());
-                        if (index == self.properTitle.length - 1) {
-
-                        } else {
-                            [self.properTitle[index], self.properTitle[index + 1]] = [self.properTitle[index + 1], self.properTitle[index]];
-                            [self.family_deceased_N_selected[index], self.family_deceased_N_selected[index + 1]] =
-                                [self.family_deceased_N_selected[index + 1], self.family_deceased_N_selected[index]];
-                        }
-                    } else if ($(self.selectedElement).children().first().hasClass("address")) {
-                        //self.address = curr.text();
-                    } else if ($(self.selectedElement).children().first().hasClass("lefttitle")) {
-                        let index = self.leftProperTitle.indexOf(curr.text());
-                        if (index == 0) {
-
-                        } else {
-                            [self.leftProperTitle[index], self.leftProperTitle[index + 1]] = [self.leftProperTitle[index + 1], self.properTitle[index]];
-                            [self.family_left_title[index], self.family_left_title[index + 1]] =
-                                [self.family_left_title[index + 1], self.family_left_title[index]];
-                        }
-                    } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
-                        let index = self.rightProperTitle.indexOf(curr.text());
-                        if (index == 0) {
-
-                        } else {
-                            [self.rightProperTitle[index], self.rightProperTitle[index + 1]] = [self.rightProperTitle[index + 1], self.properTitle[index]];
-                            [self.family_right_title[index], self.family_right_title[index + 1]] =
-                                [self.family_right_title[index + 1], self.family_right_title[index]];
-                        };
+                    if (elClass.hasClass("liveList")) {
+                        let idx = self.alive.indexOf(currName);
+                        swap(self.alive, idx); swap(self.family_deceased_Y_selected, idx);
+                    } else if (elClass.hasClass("nameList") || elClass.hasClass("rosterList") || elClass.hasClass("ancestor-wrapper")) {
+                        let idx = self.properTitle.indexOf(currName);
+                        swap(self.properTitle, idx); swap(self.family_deceased_N_selected, idx);
+                    } else if (elClass.hasClass("lefttitle")) {
+                        let idx = self.leftProperTitle.indexOf(currName);
+                        swap(self.leftProperTitle, idx); swap(self.family_left_title, idx);
+                    } else if (elClass.hasClass("righttitle")) {
+                        let idx = self.rightProperTitle.indexOf(currName);
+                        swap(self.rightProperTitle, idx); swap(self.family_right_title, idx);
                     }
-
                     self.renderItem($(self.selectedElement).children().first());
                     self.rerenderPart();
                 });
             },
             async rerenderPart() {
-                let self = this;
-                let x = self.selectStyle;
-                let style = self.allStyle.find(y => y.styleID == x.style);
-                //用來印內容的尺寸
-                let size = self.allSize.find(y => y.paperID == style.paperSize);
-                let pageSize = self.allSize.find(y => y.paperID == style.printSize);
-                //包含空白用來折的尺寸
-                let printSize = self.allSize.find(y => y.paperID == style.printSize);
-                let details = self.allStyleDetails.filter(y => y.styleID == x.style);
-                if ($(self.selectedElement).children().first().hasClass("liveList")) {
-                    $(self.selectedElement).empty();
-                    //要重新render陽上
-                    let left = []
-                    Object.assign(left, self.alive);
-                    //this.printData.forEach(x => {
+                let x = this.selectStyle;
+                let style = this.allStyle.find(y => y.styleID == x.style);
+                let details = this.allStyleDetails.filter(y => y.styleID == x.style);
+                let elClass = $(this.selectedElement).children().first();
+
+                $(this.selectedElement).empty();
+
+                if (elClass.hasClass("liveList")) {
                     let d = details.find(y => y.elementID == "alive");
-
-                    let html = this.renderLiveList(left, d);
-                    //self.selectedElement.css("font-size", fontSize + "px");
-                   
-                    //let html = self.renderLiveList(left, d, rowWidth);
-                    $(self.selectedElement).append(html);
-                } else if ($(self.selectedElement).children().first().hasClass("lefttitle") ||
-                    $(self.selectedElement).children().first().hasClass("righttitle") ||
-                    $(self.selectedElement).children().first().hasClass("address")) {
-                   
-                    let data = []
-                    if ($(self.selectedElement).children().first().hasClass("lefttitle")) {
-                        $(self.selectedElement).empty();
-                        Object.assign(data, self.leftProperTitle);
-                        let d = details.find(y => y.elementID == "lefttitle");
-                        let html = self.renderNormalWithSpace(data, d);
-                        //console.log("html:",html);
-                        $(self.selectedElement).append(html);
-                    } else if ($(self.selectedElement).children().first().hasClass("righttitle")) {
-                        $(self.selectedElement).empty();
-                        Object.assign(data, self.rightProperTitle);
-                        let d = details.find(y => y.elementID == "righttitle");
-                        let html = self.renderNormalWithSpace(data, d);
-                        $(self.selectedElement).append(html);
-                    } else if ($(self.selectedElement).children().first().hasClass("address")) {
-                        $(self.selectedElement).empty();
-                        data.push(self.address);
-                        let d = details.find(y => y.elementID == "address");
-                        let html = self.renderNormal(data, d);
-                        $(self.selectedElement).append(html);
-                    }
-                    //this.printData.forEach(x => {
+                    $(this.selectedElement).append(this.renderLiveList([...this.alive], d));
+                } else if (elClass.hasClass("lefttitle")) {
+                    let d = details.find(y => y.elementID == "lefttitle");
+                    $(this.selectedElement).append(this.renderNormalWithSpace([...this.leftProperTitle], d));
+                } else if (elClass.hasClass("righttitle")) {
+                    let d = details.find(y => y.elementID == "righttitle");
+                    $(this.selectedElement).append(this.renderNormalWithSpace([...this.rightProperTitle], d));
+                } else if (elClass.hasClass("address")) {
+                    let d = details.find(y => y.elementID == "address");
+                    $(this.selectedElement).append(this.renderNormal([this.address], d));
                 } else {
-                    let mid = []
-                    Object.assign(mid, self.properTitle);
-                    //要重新render陽上
-                    if ($(self.selectedElement).children().first().hasClass("nameList")) {
-                        $(self.selectedElement).empty();
+                    let mid = [...this.properTitle];
+                    if (elClass.hasClass("nameList")) {
                         let d = details.find(y => y.elementID == "title1");
-                        let newfontSize = self.scaleFontSize(mid, d.fontSize, d.textWidth)
-                        // 1. 依據 textHeight 與 textSpan 計算一行(垂直列)最多能放幾個名字
-
-                        //let th = Number(d.textHeight) || 0;
-                        //let span = Number(d.textSpan) || 0;
-                        //let h = Number(d.height);
-                        //let w = Number(d.width);
-
-                        //let namesPerCol = Math.floor((h + span) / (th + span));
-                        //if (namesPerCol < 1) namesPerCol = 1;
-
-                        //// 2. 計算總共會產生幾列 (cols)，並推算出每個名字能分配到的最大欄寬
-                        //let cols = Math.ceil(mid.length / namesPerCol);
-                        //if (cols < 1) cols = 1;
-                        //let colWidth = Math.floor(w / cols);
-                        //console.log(self.selectedElement,perRow, rows, rowWidth, newfontSize)
-
-                        self.selectedElement.css("font-size", newfontSize+"px");
-                        let html = self.renderNameList(mid, d, style.fontSize, style,0);
-                        $(self.selectedElement).append(html);
-                    } else if ($(self.selectedElement).children().first().hasClass("rosterList")) {
-                        $(self.selectedElement).empty();
+                        let newfontSize = this.scaleFontSize(mid, d.fontSize, d.textWidth);
+                        this.selectedElement.css("font-size", newfontSize + "px");
+                        $(this.selectedElement).append(this.renderNameList(mid, d, style.fontSize, style, 0));
+                    } else if (elClass.hasClass("rosterList")) {
                         let d = details.find(y => y.elementID == "titletriangle");
-                        let newfontSize = self.scaleFontSize(mid, d.fontSize, d.textWidth)
-                        if (newfontSize < 10) {
-                            newfontSize = 10;
-                        }
-                        self.selectedElement.css("font-size", newfontSize+"px");
-                        let html = self.renderRoster(mid, d);
-                        $(self.selectedElement).append(html);
-                    } else if ($(self.selectedElement).children().first().hasClass("ancestor-wrapper")) {
-                        $(self.selectedElement).empty();
+                        let newfontSize = Math.max(10, this.scaleFontSize(mid, d.fontSize, d.textWidth));
+                        this.selectedElement.css("font-size", newfontSize + "px");
+                        $(this.selectedElement).append(this.renderRoster(mid, d));
+                    } else if (elClass.hasClass("ancestor-wrapper")) {
                         let d = details.find(y => y.elementID == "combined");
-                        let newfontSize = self.scaleFontSize(mid, d.fontSize, d.textWidth)
-                        if (newfontSize < 10) {
-                            newfontSize = 10;
-                        }
-                        self.selectedElement.css("font-size", newfontSize+"px");
-                        let html = self.renderCombined(mid, d);
-                        $(self.selectedElement).append(html);
+                        let newfontSize = Math.max(10, this.scaleFontSize(mid, d.fontSize, d.textWidth));
+                        this.selectedElement.css("font-size", newfontSize + "px");
+                        $(this.selectedElement).append(this.renderCombined(mid, d));
                     }
                 }
             },
             countFontSize(name, el, fontSize, rows) {
                 if (Number(name.length) * 2 * Number(fontSize) > el.height) {
                     fontSize = Number(fontSize) - 2;
-                    rows = rows + 1;
-                    let rowWidth = Math.floor(Number(el.width) / rows);
+                    let rowWidth = Math.floor(Number(el.width) / (rows + 1));
                     fontSize = Math.floor(rowWidth / 2);
-
-                    // 取得遞迴後最終適合的字體大小
-                    let finalSize = this.countFontSize(name, el, fontSize, rows);
-
-                    // 若遞迴底層回傳 0 (代表沒再超過高度)，則回傳當下計算出的 fontSize 
+                    let finalSize = this.countFontSize(name, el, fontSize, rows + 1);
                     return finalSize === 0 ? fontSize : finalSize;
                 }
-                return 0; // 若原本就沒超過高度，回傳 0 表示不需要縮放
+                return 0;
             },
             calcIndividualFontSize(name, el, maxW) {
                 let s = Number(el.style ? el.style.fontSize : (el.fontSize ? el.fontSize : 18));
-                let maxH = Number(el.textHeight); // 限制在單一名字預設的區塊高度內
+                let maxH = Number(el.textHeight);
                 let l = Number(name.length);
 
                 while (s >= 12) {
-                    let s_px = s * 1.333; // 將 pt 轉換為 px
-
-
-                    // 如果單行高度夠放，直接回傳當下大小 (不會過度縮小)
-                    //if (l * s_px <= maxH) {
-                    //    return s;
-                    //}
-
-                    // 單行放不下，模擬多行折疊後的總寬度
-                    let charsPerCol = Math.floor(maxH / s_px);
-                    if (charsPerCol < 1) charsPerCol = 1;
-
+                    let s_px = s * 1.333;
+                    let charsPerCol = Math.max(1, Math.floor(maxH / s_px));
                     let cols = Math.ceil(l / charsPerCol);
-                    let neededWidth = (cols === 1) ? s_px : cols * (s_px * 1.1); // 1.1 為緊密行高
+                    let neededWidth = (cols === 1) ? s_px : cols * (s_px * 1.1);
 
-                    // 如果折疊後的總寬度不超過分配到的橫向欄寬，就是最佳字體
                     if (neededWidth <= maxW && (cols > 1 || l * s_px <= maxH)) {
                         return s;
                     }
-                    s -= 1; // 否則繼續縮小 1pt
+                    s -= 1;
                 }
-                return 12; // 極限最小字體
-            },
-            async itemAppend(e) {
-                //console.log(e);
+                return 12;
             },
             changeStyle() {
-                let self = this;
                 this.selected.style = $("#styleSel").val();
                 this.selectStyle.style = $("#styleSel").val();
-                //console.log("changeStyle:",this.selectStyle);
                 this.render();
             },
-            fix2(val) {
-                return Number.parseFloat(val).toFixed(2);
-            },
             renderNormalWithSpace(mid, d) {
-                //console.log("renderNormal:", d)
-                let self = this;
                 let txt = $(`<div class='${d.elementID}'></div>`).css({
-                    "z-index": 9999, visibility: d.visibility,
-                    width: d.width, height: d.height,
-                    padding: "1px",
-                    "writing-mode": "vertical rl",
-                    display: "flex",
-                    "flex-direction": "row",
-                    "flex-wrap": "wrap",
-                    margin: "auto",
-                    //"letter-spacing": "0.1em",
-                    "column-gap": `${d.textSpan}px`,
-                    //"row-gap": "1px",
-                    "align-items": "flex-start",
-                    "justify-content": "start",
+                    "z-index": 9999, visibility: d.visibility, width: d.width, height: d.height, padding: "1px",
+                    "writing-mode": "vertical-rl", display: "flex", "flex-direction": "row", "flex-wrap": "wrap", margin: "auto",
+                    "column-gap": `${d.textSpan}px`, "align-items": "flex-start", "justify-content": "start"
                 });
-                //console.log("吼優:",mid);
                 mid.forEach(x => {
-                    let dd = $(`<div>${x}</div>`).css({
-                        "margin-bottom": "10px",
-                        "margin-left": "5px",
-                        "text-justify": "inter-character",
-                        "white-space": "pre-line",
-                    });
-                    $(txt).append(dd);
+                    $(txt).append($(`<div>${x}</div>`).css({ "margin-bottom": "10px", "margin-left": "5px", "text-justify": "inter-character", "white-space": "pre-line" }));
                 });
                 return txt;
             },
             renderNormal(mid, d) {
-                //console.log("renderNormal:", d)
-                let self = this;
-                let txt = $(`<div class='${d.elementID}'>${mid}</div>`).css({
-                    "z-index": 9999, visibility: d.visibility,
-                    width: d.width, height: d.height
-                });
-                return txt;
+                return $(`<div class='${d.elementID}'>${mid}</div>`).css({ "z-index": 9999, visibility: d.visibility, width: d.width, height: d.height });
             },
             renderNameList(names, d, newFontSize, style, colWidth) {
-                let h = parseFloat(d.height);
-                let w = parseFloat(d.width);
-                let th = parseFloat(d.textHeight) || h;
-                let v_gap = parseFloat(d.textSpan) || 0;
-                let h_gap = 5;
+                let h = parseFloat(d.height), w = parseFloat(d.width), th = parseFloat(d.textHeight) || h;
+                let v_gap = parseFloat(d.textSpan) || 0, h_gap = 5;
+                let shrinkLimit = h < 300 ? 12 : (h < 500 ? 8 : 6);
+                let long_s = parseFloat(d.fontSize), short_s = parseFloat(d.fontSize);
 
-                let shrinkLimit = 6;
-                if (h < 500) {
-                    shrinkLimit = 8;
-                } else if (h < 300) {
-                    shrinkLimit = 12;
-                }
+                let testNames = [...names];
+                if (h<500&&testNames.length == 1 && testNames[0].includes("暨無始劫以來累世冤親債主")) testNames[0] = testNames[0].split("暨")[0] + "暨";
 
-                let long_s = parseFloat(d.fontSize);
-                let short_s = parseFloat(d.fontSize);
-
-                if (names.length == 1 && names[0].includes("暨無始劫以來累世冤親債主")) {
-                    names = names[0].split("暨");
-                    names[0] = names[0] + "暨";
-                }
-
-                // 1. 固定的長短名判斷
-                let items = names.map(name => {
-                    let l = name.length;
-                    let isShort = (names.length > 1) && ((l * 40) <= (th + (v_gap / 2)));
-                    return { name: name, l: l, isShort: isShort, isMulti: false, size: 0 };
-                });
-
-                // 🌟 剔除「幽靈扣血」區間：直接從真實極限起跑
-                //let max_short_effective = shrinkLimit;
-                //let min_long_limit = parseFloat(d.fontSize);
-
-                //items.forEach(item => {
-                //    if (item.isShort) {
-                //        let max_s_for_th = Math.floor(th / (item.l * 1.333));
-                //        if (max_s_for_th > max_short_effective) max_short_effective = max_s_for_th;
-                //    } else {
-                //        let max_s_for_h = Math.floor((h - 10) / (item.l * 1.333));
-                //        if (max_s_for_h < min_long_limit) min_long_limit = max_s_for_h;
-                //    }
-                //});
-
-                //if (short_s > max_short_effective) short_s = max_short_effective;
-                //if (long_s > min_long_limit) long_s = min_long_limit;
-
-                let sizes = [];
-                let shrink_turn = 'long';
+                let items = testNames.map(name => ({ name: name, l: name.length, isShort: (testNames.length > 1) && ((name.length * 40) <= (th + (v_gap / 2))), isMulti: false, size: 0 }));
+                let sizes = [], shrink_turn = 'long';
 
                 while (true) {
-                    let totalWidth = 0;
-                    let current_col_h = 0;
-                    let current_col_w = 0;
-                    let cols_width = [];
-                    let any_wrapped = false;
-
-                    for (let i = 0; i < items.length; i++) {
-                        let item = items[i];
+                    let cols_width = [], current_col_h = 0, current_col_w = 0, any_wrapped = false;
+                    for (let item of items) {
                         let s = item.isShort ? short_s : long_s;
-
-                        if (item.isShort) {
-                            let max_s_for_th = Math.floor(th / (item.l * 1.333));
-                            if (s > max_s_for_th) s = max_s_for_th;
-                        }
-
+                        if (item.isShort) s = Math.min(s, Math.floor(th / (item.l * 1.333)));
                         item.size = s;
                         let size_px = s * 1.333;
 
                         if (item.isShort) {
                             let item_h = Math.max(th, item.l * size_px);
-                            if (current_col_h === 0) {
-                                current_col_h = item_h;
-                                current_col_w = size_px;
-                            } else if ((current_col_h + v_gap + item_h) <= h) {
-                                current_col_h += (v_gap + item_h);
-                                if (size_px > current_col_w) current_col_w = size_px;
-                            } else {
-                                cols_width.push(current_col_w);
-                                current_col_h = item_h;
-                                current_col_w = size_px;
-                            }
+                            if (current_col_h === 0) { current_col_h = item_h; current_col_w = size_px; }
+                            else if ((current_col_h + v_gap + item_h) <= h) { current_col_h += (v_gap + item_h); current_col_w = Math.max(current_col_w, size_px); }
+                            else { cols_width.push(current_col_w); current_col_h = item_h; current_col_w = size_px; }
                         } else {
-                            if (current_col_h > 0) {
-                                cols_width.push(current_col_w);
-                                current_col_h = 0;
-                                current_col_w = 0;
-                            }
-
+                            if (current_col_h > 0) { cols_width.push(current_col_w); current_col_h = 0; current_col_w = 0; }
                             let item_w = size_px;
                             if ((item.l * size_px) > (h - 10)) {
-                                item.isMulti = true;
-                                any_wrapped = true;
-                                let chars_per_col = Math.floor((h - 10) / size_px);
-                                if (chars_per_col < 1) chars_per_col = 1;
-                                let item_cols = Math.ceil(item.l / chars_per_col);
-                                item_w = item_cols * (size_px * 1.1);
-                            } else {
-                                item.isMulti = false;
-                            }
-
+                                item.isMulti = true; any_wrapped = true;
+                                item_w = Math.ceil(item.l / Math.max(1, Math.floor((h - 10) / size_px))) * (size_px * 1.1);
+                            } else { item.isMulti = false; }
                             cols_width.push(item_w);
                         }
                     }
-
                     if (current_col_h > 0) cols_width.push(current_col_w);
 
-                    totalWidth = cols_width.reduce((a, b) => a + b, 0) + (cols_width.length > 1 ? (cols_width.length - 1) * h_gap : 0);
-
-                    if (totalWidth <= w && (!any_wrapped || long_s === shrinkLimit)) {
-                        sizes = items.map(x => {
-                            let final_s = x.size;
-                            if (x.isShort) {
-                                let max_s_for_th = Math.floor(th / (x.l * 1.333));
-                                if (final_s > max_s_for_th) final_s = max_s_for_th;
-                            }
-                            return { name: x.name, size: final_s, isMulti: x.isMulti, isShort: x.isShort };
-                        });
+                    if (cols_width.reduce((a, b) => a + b, 0) + (cols_width.length > 1 ? (cols_width.length - 1) * h_gap : 0) <= w && (!any_wrapped || long_s === shrinkLimit)) {
+                        sizes = items.map(x => ({ name: x.name, size: x.isShort ? Math.min(x.size, Math.floor(th / (x.l * 1.333))) : x.size, isMulti: x.isMulti, isShort: x.isShort }));
                         break;
                     }
 
-                    if (any_wrapped && long_s > shrinkLimit) {
-                        long_s--;
-                    } else {
-                        let hasLong = items.some(x => !x.isShort);
-                        let hasShort = items.some(x => x.isShort);
-
+                    if (any_wrapped && long_s > shrinkLimit) long_s--;
+                    else {
+                        let hasLong = items.some(x => !x.isShort), hasShort = items.some(x => x.isShort);
                         if (hasLong && hasShort) {
-                            if (shrink_turn === 'long') {
-                                if (long_s > shrinkLimit) { long_s--; shrink_turn = 'short'; }
-                                else if (short_s > shrinkLimit) { short_s--; shrink_turn = 'long'; }
-                                else break;
-                            } else {
-                                if (short_s > shrinkLimit) { short_s--; shrink_turn = 'long'; }
-                                else if (long_s > shrinkLimit) { long_s--; shrink_turn = 'short'; }
-                                else break;
-                            }
-                        } else if (hasLong) {
-                            if (long_s > shrinkLimit) long_s--;
-                            else break;
-                        } else {
-                            if (short_s > shrinkLimit) short_s--;
-                            else break;
-                        }
+                            if (shrink_turn === 'long') { if (long_s > shrinkLimit) { long_s--; shrink_turn = 'short'; } else if (short_s > shrinkLimit) { short_s--; shrink_turn = 'long'; } else break; }
+                            else { if (short_s > shrinkLimit) { short_s--; shrink_turn = 'long'; } else if (long_s > shrinkLimit) { long_s--; shrink_turn = 'short'; } else break; }
+                        } else if (hasLong) { if (long_s > shrinkLimit) long_s--; else break; }
+                        else { if (short_s > shrinkLimit) short_s--; else break; }
                     }
                 }
 
-                if (sizes.length === 0) {
-                    sizes = names.map(name => {
-                        return { name: name, size: shrinkLimit, isMulti: false, isShort: true };
-                    });
-                }
-
-                let $namelist = $(`<div class='nameList'></div>`).css({
-                    "writing-mode": "vertical-rl",
-                    display: "flex",
-                    "flex-direction": "row",
-                    "flex-wrap": "wrap",
-                    "align-content": "center",
-                    "align-items": "center",
-                    margin: "auto",
-                    width: `${w}px`,
-                    height: `${h}px`,
-                    border: "0px solid transparent",
-                    padding: "1px",
-                    "column-gap": `${v_gap}px`,
-                    "font-family": d.fontFamily
-                });
+                if (sizes.length === 0) sizes = names.map(name => ({ name: name, size: shrinkLimit, isMulti: false, isShort: true }));
 
+                let $namelist = $(`<div class='nameList'></div>`).css({ "writing-mode": "vertical-rl", display: "flex", "flex-direction": "row", "flex-wrap": "wrap", "align-content": "center", "align-items": "center", margin: "auto", width: `${w}px`, height: `${h}px`, border: "0px solid transparent", padding: "1px", "column-gap": `${v_gap}px`, "font-family": d.fontFamily });
                 sizes.forEach(item => {
-                    let minH = item.isShort ? `${th}px` : `${h}px`;
                     let alignStyle = item.isMulti || (!item.isMulti && !item.isShort) ? "start" : "justify";
-
-                    let $span = $(`<span style="font-size: ${item.size}pt;">${item.name}</span>`).css({
-                        display: "block",
-                        "min-height": minH,
-                        "max-height": `${h}px`,
-                        width: "auto",
-                        "line-height": "1.1",
-                        "text-align": alignStyle,
-                        "text-align-last": alignStyle,
-                        "margin-left": "5px",
-                        "text-justify": "inter-character",
-                        "word-break": "break-all"
-                    });
-                    $namelist.append($span);
+                    $namelist.append($(`<span style="font-size: ${item.size}pt;">${item.name}</span>`).css({ display: "block", "min-height": item.isShort ? `${th}px` : `${h}px`, "max-height": `${h}px`, width: "auto", "line-height": "1.1", "text-align": alignStyle, "text-align-last": alignStyle, "margin-left": "5px", "text-justify": "inter-character", "word-break": "break-all" }));
                 });
 
                 return $namelist;
             },
 
             renderLiveList(names, el) {
-                let h = parseFloat(el.height);
-                let w = parseFloat(el.width);
-                let th = parseFloat(el.textHeight) || h;
-
-                let v_gap = parseFloat(el.textSpan) || 0;
-                let h_gap = 5;
-
-                let shrinkLimit = 4;
-                if (h < 300) {
-                    shrinkLimit = 8;
-                } else if (h < 500) {
-                    shrinkLimit = 6;
-                }
-
+                let h = parseFloat(el.height), w = parseFloat(el.width), th = parseFloat(el.textHeight) || h;
+                let v_gap = parseFloat(el.textSpan) || 0, h_gap = 5;
+                let shrinkLimit = h < 300 ? 8 : (h < 500 ? 6 : 4);
                 let s = parseFloat(el.fontSize);
 
                 while (s >= shrinkLimit) {
-                    let size_px = s * 1.333;
-                    let current_col_h = 0;
-                    let current_col_w = 0;
-                    let cols_width = [];
-                    let any_wrapped = false;
-
-                    for (let i = 0; i < names.length; i++) {
-                        let l = names[i].length;
-                        let item_h = Math.max(th, l * size_px);
-
+                    let size_px = s * 1.333, current_col_h = 0, current_col_w = 0, cols_width = [], any_wrapped = false;
+                    for (let name of names) {
+                        let item_h = Math.max(th, name.length * size_px);
                         if (item_h > (h - 5)) {
                             any_wrapped = true;
-                            if (current_col_h > 0) {
-                                cols_width.push(current_col_w);
-                                current_col_h = 0;
-                                current_col_w = 0;
-                            }
-                            let chars_per_col = Math.floor((h - 5) / size_px);
-                            if (chars_per_col < 1) chars_per_col = 1;
-                            let item_cols = Math.ceil(l / chars_per_col);
-                            cols_width.push(item_cols * (size_px * 1.1));
+                            if (current_col_h > 0) { cols_width.push(current_col_w); current_col_h = 0; current_col_w = 0; }
+                            cols_width.push(Math.ceil(name.length / Math.max(1, Math.floor((h - 5) / size_px))) * (size_px * 1.1));
                         } else {
-                            if (current_col_h === 0) {
-                                current_col_h = item_h;
-                                current_col_w = size_px;
-                            } else if (current_col_h + v_gap + item_h <= h) {
-                                current_col_h += v_gap + item_h;
-                                if (size_px > current_col_w) current_col_w = size_px;
-                            } else {
-                                cols_width.push(current_col_w);
-                                current_col_h = item_h;
-                                current_col_w = size_px;
-                            }
+                            if (current_col_h === 0) { current_col_h = item_h; current_col_w = size_px; }
+                            else if (current_col_h + v_gap + item_h <= h) { current_col_h += v_gap + item_h; current_col_w = Math.max(current_col_w, size_px); }
+                            else { cols_width.push(current_col_w); current_col_h = item_h; current_col_w = size_px; }
                         }
                     }
-
                     if (current_col_h > 0) cols_width.push(current_col_w);
-
-                    let totalWidth = cols_width.reduce((a, b) => a + b, 0) + (cols_width.length > 1 ? (cols_width.length - 1) * h_gap : 0);
-
-                    if (totalWidth <= w && (!any_wrapped || s === shrinkLimit)) {
-                        break;
-                    }
+                    if (cols_width.reduce((a, b) => a + b, 0) + (cols_width.length > 1 ? (cols_width.length - 1) * h_gap : 0) <= w && (!any_wrapped || s === shrinkLimit)) break;
                     s -= 1;
                 }
 
-                if (s < shrinkLimit) s = shrinkLimit;
-
-                let $namelist = $(`<div class='liveList'></div>`).css({
-                    "writing-mode": "vertical-rl",
-                    "display": "flex",
-                    "flex-flow": "wrap",
-                    "align-content": "center",
-                    "align-items": "center",
-                    "margin": "auto",
-                    "width": `${w}px`,
-                    "height": `${h}px`,
-                    "border": "0px solid transparent",
-                    "padding": "0px",
-                    "font-family": el.fontFamily,
-                    "column-gap": `${v_gap}px`
-                });
-
-                let self = this;
-                names.forEach(name => {
-                    $namelist.append(self.renderLiveSpan(name, el, s));
-                });
-
+                s = Math.max(s, shrinkLimit);
+                let $namelist = $(`<div class='liveList'></div>`).css({ "writing-mode": "vertical-rl", "display": "flex", "flex-flow": "wrap", "align-content": "center", "align-items": "center", "margin": "auto", "width": `${w}px`, "height": `${h}px`, "border": "0px solid transparent", "padding": "0px", "font-family": el.fontFamily, "column-gap": `${v_gap}px` });
+                names.forEach(name => $namelist.append(this.renderLiveSpan(name, el, s)));
                 return $namelist;
             },
 
             renderLiveSpan(name, el, fontSize) {
-                let h = parseFloat(el.height);
-                let th = parseFloat(el.textHeight) || h;
-
-                return $(`<span style="font-size: ${fontSize}pt;">${name}</span>`).css({
-                    "display": "block",
-                    "min-height": `${th}px`,
-                    "max-height": `${h}px`,
-                    "width": "auto",
-                    "text-align": "justify",
-                    "text-align-last": "justify",
-                    "margin-left": "0px",
-                    "text-justify": "inter-character",
-                    "word-break": "break-all",
-                    "white-space": "pre-line"
-                });
+                return $(`<span style="font-size: ${fontSize}pt;">${name}</span>`).css({ "display": "block", "min-height": `${parseFloat(el.textHeight) || parseFloat(el.height)}px`, "max-height": `${parseFloat(el.height)}px`, "width": "auto", "text-align": "justify", "text-align-last": "justify", "margin-left": "0px", "text-justify": "inter-character", "word-break": "break-all", "white-space": "pre-line" });
             },
-            // 品字佈局邏輯：一上二下
+
             renderRoster(names, el) {
                 if (!names.length) return '';
                 const mid = names.length === 1 ? 1 : Math.floor(names.length / 2);
-                const top = names.slice(0, mid);
-                const bot = names.slice(mid);
-                const size = this.autoScale(names, el.fontSize);
+                let h = $(`<div class="rosterList"></div>`).css({ width: el.width, height: el.height, "writing-mode": "vertical-rl", display: "flex", "flex-direction": "row", "align-items": "center", "justify-content": "start", gap: "20px" });
+                h.append(this.renderNameGroups(names.slice(0, mid), el));
+                if (names.slice(mid).length) h.append(this.renderNameGroups(names.slice(mid), el));
+                return h;
+            },
 
-                let h = $(`<div class="rosterList"></div>`).css(
-                    {
-                        width: el.width, height: el.height,
-                        "writing-mode": "vertical-rl", /* 直書 */
-                        display: "flex",
-                        "flex-direction": "row",     /* 上下分層 (Top / Bottom) */
-                        "align-items": "center",    /* 左右置中對齊 */
-                        "justify-content": "start",
-                        gap: "20px",
-                    });
-                h.append(this.renderNameGroups(top, el));
-                if (bot.length) h.append(this.renderNameGroups(bot, el));
-                return h
-            },
             renderCombined(mid, d) {
-                ancestorFontSize = d.fontSize;
-                newFontSize = d.fontSize;
                 const parts = mid.join("\n").split('\n');
-                html = `<div class="ancestor-wrapper" style="width:${d.width}px !important;height:${d.height}px !important;" >
-                              <span class="main-name" >${parts[0] || ''}</span>
-                              <span class="sub-text">${parts[1] || ''}</span>
-                          </div>`;
-                return html
+                return `<div class="ancestor-wrapper" style="width:${d.width}px !important;height:${d.height}px !important;" >
+                                <span class="main-name" >${parts[0] || ''}</span>
+                                <span class="sub-text">${parts[1] || ''}</span>
+                            </div>`;
             },
+
             renderNameGroups(items, el) {
-                let g = $(`<div class="rosterspan"></div>`).css({
-                    "display": "flex",
-                    "flex-direction": "column",
-                    "justify-content": "center",
-                    "height": el.textHeight,
-                    "white-space": "pre-line"
-                })
-                items.forEach(x => {
-                    g.append($(`<div class="" style="letter-spacing: 10px;text-align: justify; text-align-last: justify;">${x}</div>`))//font-size:${el.fontSize}pt;
-                })
+                let g = $(`<div class="rosterspan"></div>`).css({ "display": "flex", "flex-direction": "column", "justify-content": "center", "height": el.textHeight, "white-space": "pre-line" });
+                items.forEach(x => g.append($(`<div style="letter-spacing: 10px;text-align: justify; text-align-last: justify;">${x}</div>`)));
                 return g;
             },
+
             async autoScale(names, base) {
                 const max = Math.max(...names.map(n => n.length), 0);
                 return max > 5 ? Math.max(base * (5 / max), base * 0.6) : base;
             },
+
             scaleFontSize(txtContent, fontSize, elementWidth) {
-
                 let font = this.getTextSize("講", parseInt(fontSize));
-                //自動判斷縮小字型的規則,要同時縮小間距
-
-                //if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
-                //console.log("shit:", txtContent.join(","), (Math.ceil(txtContent.length / 2) * font.width) * 2, parseFloat(elementWidth))
                 if ((Math.ceil(txtContent.length / 2) * font.width) * 2 > parseFloat(elementWidth)) {
                     let newfontSize = parseInt(fontSize) - 1;
-                    if (newfontSize <= 10) {
-                        return newfontSize;
-                    }
-                    //console.log("newfontSize:",newfontSize)
-                    return this.scaleFontSize(txtContent, newfontSize, elementWidth);
+                    return newfontSize <= 10 ? newfontSize : this.scaleFontSize(txtContent, newfontSize, elementWidth);
                 }
                 return fontSize;
             },
-            getTextInfo(text, font) {
-                const canvas = document.createElement("canvas");
-                const context = canvas.getContext("2d");
-                context.font = font;
-                const metrics = context.measureText(text);
-                return metrics
-            },
-            getTextWidth(text, font) {
-                const canvas = document.createElement("canvas");
-                const context = canvas.getContext("2d");
-                context.font = font;
-                const metrics = context.measureText(text);
 
-                return metrics;
-            },
             getTextSize(txt, fontsize) {
                 let span = document.createElement("span");
-                span.style.visibility = "hidden";
-                span.style.position = "absolute";
-                span.style.fontSize = fontsize + "px";
-                span.style.fontFamily = "";
+                span.style.cssText = `visibility: hidden; position: absolute; font-size: ${fontsize}px; font-family: "";`;
                 span.innerText = txt;
                 document.body.appendChild(span);
-                let result = {
-                    width: span.offsetWidth,
-                    height: span.offsetHeight
-                }
+                let result = { width: span.offsetWidth, height: span.offsetHeight };
                 document.body.removeChild(span);
                 return result;
             },
-            filterToSel() {
-                let allList = document.querySelector(".canselectItem").querySelectorAll("li"); //$(".canselectItem").querySelectorAll("li");
-                allList.forEach(x => {
-                    let curr = $(x).children().eq(1);
-                    x.setAttribute("style", "display:none")
-                    $(x).css("style", "display:none")
-                    if (curr && curr.text().includes($("#filter_txt").val())) {
-                        x.setAttribute("style", "display:")
-                    } else {
 
+            filterToSel() {
+                document.querySelectorAll(".canselectItem li").forEach(x => {
+                    let curr = $(x).children().eq(1);
+                    if (curr && curr.text().includes($("#filter_txt").val())) {
+                        $(x).css("display", "");
+                    } else {
+                        $(x).css("display", "none");
                     }
                 });
             },
+
             async saveFamily() {
-                let self = this;
-                if (this.follower_id == "") {
-                    //console.log("follower_id:", this.follower_id);
-                    return false
-                }
-
-                let pro_order_detail =
-                {
-                    // num: this.editedItem.num,//原先載入時的家人num
-                    //f_num: this.editedItem.f_num_selected.val, //儲存時的家人num
-                    //leader: this.follower_id,
-                    //appellation_id: this.editedItem.appellation_id_selected.val, //儲存時的稱謂
-                    follower_num: this.follower_id,
-                    fam_name: $("#family_txt").val(),
-                    fam_title:$("#title_txt").val(),
-                    deceased: $("#deceased_sel").val() == "False" ? false : true,
-                    num: 0
-
-                }
+                if (!this.follower_id) return false;
+                let detail = { follower_num: this.follower_id, fam_name: $("#family_txt").val(), fam_title: $("#title_txt").val(), deceased: $("#deceased_sel").val() !== "False", num: 0 };
                 this.modal.toggle();
-                //$(this.modal).toggle();
-                //$(this.modal).addClass("hide");
-                //console.log(pro_order_detail);
-                //console.log(this.modal);
-                //$(this.modal).hide();
-                axios
-                    .post('/api/tablet/saveFamily', pro_order_detail)
-                    .then(response => {
-                        //console.log(response);
-                        if (response.status == 200 && response.data.result == "Y") {
-                            let data = response.data;
-                            self.familyMembers.push(data.data);
-                            //console.log(self.familyMembers);
-                            //alert("新增成功");
-                            self.modal.toggle();
-
-                            if (self.selectedElement) {
-                                let element = $(self.selectedElement).children().first();
-                                self.renderItem(element);
-                            }
-                            $("#toast_body").html(`${"新增成功"}`)
-                            $("#family_txt").val("");
-                            $("#title_txt").val("");
-                            $("#deceased_sel").val("False")
-                            self.toast.show();
-                        } else {
-
-                        }
-                    });
+                await axios.post('/api/tablet/saveFamily', detail).then(response => {
+                    if (response.status == 200 && response.data.result == "Y") {
+                        this.familyMembers.push(response.data.data);
+                        this.modal.toggle();
+                        if (this.selectedElement) this.renderItem($(this.selectedElement).children().first());
+                        $("#toast_body").html("新增成功"); $("#family_txt").val(""); $("#title_txt").val(""); $("#deceased_sel").val("False"); this.toast.show();
+                    }
+                });
             },
+
             async save(event) {
-                event.preventDefault()
-                //console.log("tabletItem:", designer.tabletItem);
-                //拚牌位的內容
-                //console.log("AA")
-                let self = this;
-                let tablet = {
-                    mid_items: designer.family_deceased_N_selected,
-                    left_items: designer.family_deceased_Y_selected,
-                    style: designer.selectStyle.style,
-                    mid_left: designer.family_left_title,
-                    mid_right: designer.family_right_title,
-                    addr_items: designer.family_address
-                }
-                //console.log("BB")
-                var pro_order_detail =
-                {
-                    num: designer.tabletItem.num <= 0 ? null : designer.tabletItem.num,
-                    order_no: designer.tabletItem.order_no,
-                    parent_num: designer.tabletItem.parent_num,
-                    actItem_num: designer.tabletItem.actitem_num_selected.val,
-                    f_num: designer.tabletItem.f_num_selected.val,
-                    f_num_tablet: JSON.stringify(tablet), //designer.tabletItem.f_num_tablet,//牌位內容
-                    print_id: designer.tabletItem.print_id,
-                    address: designer.tabletItem.address,
-                    from_id: designer.tabletItem.from_id_selected.val,
-                    from_id_tablet: designer.tabletItem.from_id_tablet,
-                    start_date: designer.tabletItem.category == 1 ? designer.tabletItem.start_date : null,
-                    due_date: designer.tabletItem.category == 1 ? designer.tabletItem.due_date : null,
-                    extend_date: designer.tabletItem.category == 1 ? designer.tabletItem.extend_date : null,
-                    price: designer.tabletItem.price,
-                    qty: designer.tabletItem.qty,
-                    //total: this.editedItem.total,
-                    keyin1: designer.tabletItem.keyin1_selected.val,
-                    demo: designer.tabletItem.demo,
-                    pay: designer.tabletItem.pay,
-                    pay_date: designer.tabletItem.pay_date,
-                    customize_data: designer.tabletItem.customize_data,
-                    style: designer.selectStyle.style
-                }
-                //console.log("CC")
-                await axios
-                    .post('/api/order/SaveDetailData', pro_order_detail)
-                    .then(response => {
-
-                        let tablet_data = {
-                            mid_items: self.family_deceased_N_selected,
-                            left_items: self.family_deceased_Y_selected,
-                            style: self.selectStyle.style,
-                            mid_left: self.family_left_title,
-                            mid_right: self.family_right_title,
-                            addr_items: self.family_address
-                        }
-                        const ret = {
-                            source: 'editorNew.btn.click',
-                            data: {
-                                tabletItem: this.tabletItem,
-                                tablet_data: tablet_data,
-                                style: self.selectStyle.style
-                            }
-                        };
-                        window.parent.postMessage(ret, '/');
-                        //$.toast({
-                        //    heading: 'Success',
-                        //    text: 'Your action was completed successfully!',
-                        //    showHideTransition: 'slide', // fade, slide, plain
-                        //    icon: 'success', // info, warning, error, success
-                        //    position: 'top-left',
-                        //    loaderBg: '#4CAF50', // loader background color
-                        //    hideAfter: 3000 // auto close after 3 seconds
-                        //});
-                        //$(".toast-body").empty();
-                        //$(".toast-body").html("ok");
-                        //this.toast.show();
-                    });
-
-                //console.log("pro_order_detail:",pro_order_detail);
-            },
-            reset() {
-                designer.code = { style: [] };
-                designer.selected = {
-                    style: ""
+                event.preventDefault();
+                let tablet = { mid_items: this.family_deceased_N_selected, left_items: this.family_deceased_Y_selected, style: this.selectStyle.style, mid_left: this.family_left_title, mid_right: this.family_right_title, addr_items: this.family_address };
+                let detail = {
+                    num: this.tabletItem.num <= 0 ? null : this.tabletItem.num, order_no: this.tabletItem.order_no, parent_num: this.tabletItem.parent_num, actItem_num: this.tabletItem.actitem_num_selected?.val,
+                    f_num: this.tabletItem.f_num_selected?.val, f_num_tablet: JSON.stringify(tablet), print_id: this.tabletItem.print_id, address: this.tabletItem.address,
+                    from_id: this.tabletItem.from_id_selected?.val, from_id_tablet: this.tabletItem.from_id_tablet, start_date: this.tabletItem.category == 1 ? this.tabletItem.start_date : null,
+                    due_date: this.tabletItem.category == 1 ? this.tabletItem.due_date : null, extend_date: this.tabletItem.category == 1 ? this.tabletItem.extend_date : null,
+                    price: this.tabletItem.price, qty: this.tabletItem.qty, keyin1: this.tabletItem.keyin1_selected?.val, demo: this.tabletItem.demo, pay: this.tabletItem.pay,
+                    pay_date: this.tabletItem.pay_date, customize_data: this.tabletItem.customize_data, style: this.selectStyle.style
                 };
-                designer.actitem = "";
-                designer.pageSize = "";
-                designer.defaultStyle = "";
-                designer.isAllSelected = false;
-                designer.dialog = false;
-                designer.addDialog = false;        // 新增項目對話框
-                designer.addDialogType = '';       // 'Y' 或 'N'
-                designer.newItemText = '';         // 新增項目的文字
-                designer.noSpace = true;           // 不加空格 checkbox（預設勾選）
-                designer.deleteDialog = false;     // 確認刪除對話框
-                designer.deleteIndex = -1;         // 要刪除的 index
-                designer.deleteType = '';          // 'Y' 或 'N'
-                designer.deleteMemberName = '';    // 要刪除的名稱（顯示用）
-                designer.phrases = [];             // 常用片語
-                designer.familyMembers = []; // 親友名單
-                designer.tabletItem = {}; // 傳入的資料(信眾/牌位資訊)
-                designer.item = {};
-                designer.family_deceased_Y_selected = []; // 超渡/超薦/超冤名單
-                designer.family_deceased_N_selected = [];  // 消災/陽上名單
-                designer.family_left_title = [];
-                designer.family_right_title = [];
-                designer.allStyle = [];
-                designer.allStyleDetails = [];
-                designer.allSize = [];
-                designer.tabletElement = [];
-                designer.http_host = "";
-                designer.printData = [];
-                designer.selectedElement = {};
-                designer.selectStyle = {};
-                designer.properTitle = [];//正名
-                designer.leftProperTitle = [];//左正名
-                designer.rightProperTitle = [];//右正名
-                designer.address = "";//地址
-                designer.alive = [];//陽上
-                designer.tabletType = "A";
-                designer.follower_id = "";
-                $(".printArea").empty();
-                $(".selectItem").empty();
-                $(".canselectItem").empty();
+                await axios.post('/api/order/SaveDetailData', detail).then(() => {
+                    window.parent.postMessage({ source: 'editorNew.btn.click', data: { tabletItem: this.tabletItem, tablet_data: tablet, style: this.selectStyle.style } }, '/');
+                });
             },
-            async resetScreen() {
-                $(".printArea").empty();
-                $(".selectItem").empty();
-                $(".canselectItem").empty();
-            }
 
-        }
+            async resetScreen() {
+                $(".printArea").empty(); $(".selectItem").empty(); $(".canselectItem").empty();
+            }
+        };
 
         $(() => $(window).on("message", function (event) {
-            //designer.toast.show();
-            //designer.reset();
             let e = event.originalEvent;
-            //console.log("QOO");
-            //console.log("傳過來了");
             if (e.origin === window.parent.location.origin) {
-                //console.log('editor.html - origin check passed');
-                //console.log('editor.html - received data:', event.data);
-                const receivedData = e.data;
-               // console.log("receivedData:", receivedData)
-                designer.family_deceased_Y_selected = [];
-                designer.family_deceased_N_selected = [];
-                designer.family_left_title = [];
-                designer.family_right_title = [];
-                designer.http_host = receivedData.host;
-                designer.follower_id = receivedData.follower_id;
-                //console.log("三小:", receivedData.tabletItem)
-                if (receivedData.tabletItem) {
-                    //console.log('editor.html - updating tabletItem:', receivedData.tabletItem);
-                    designer.tabletItem = receivedData.tabletItem;
-                    if (receivedData.familyMembers) {
-                        designer.familyMembers = receivedData.familyMembers; // 更新 familyMembers
-                        //console.log("app mounted, window message: ", this.familyMembers, receivedData);
-                    }
-                    //if (receivedData.tabletItem) {
-                    //    designer.tabletItem = receivedData.tabletItem;
-                    //}
-                    //console.log("actitem:", receivedData.tabletItem.actitem_num_selected.val);
+                const data = e.data;
+                designer.family_deceased_Y_selected = []; designer.family_deceased_N_selected = []; designer.family_left_title = []; designer.family_right_title = [];
+                designer.http_host = data.host; designer.follower_id = data.follower_id;
 
-                    if (receivedData.tabletItem.style) {
-                        designer.selected.style = receivedData.tabletItem.style;
-                    } else {
-                        designer.selected.style = "";
-                    }
+                if (data.tabletItem) {
+                    designer.tabletItem = data.tabletItem;
+                    if (data.familyMembers) designer.familyMembers = data.familyMembers;
+                    designer.selected.style = data.tabletItem.style || "";
+                    designer.actitem = data.tabletItem.actitem_num_selected?.val || "";
 
-                    designer.actitem = receivedData.tabletItem.actitem_num_selected.val;
-
-                    //console.log("actitem:",receivedData.tabletItem.actitem_num_selected.val);
-                    // 處理 f_num_tablet 資料
                     if (designer.tabletItem.f_num_tablet) {
                         try {
-                            const data = JSON.parse(designer.tabletItem.f_num_tablet);
-
+                            const parsedData = JSON.parse(designer.tabletItem.f_num_tablet);
                             if (designer.item_type === 'B') {
-                                // B類型：超渡、超薦等
-                                designer.family_deceased_Y_selected = data.mid_items || [];
-                                designer.family_deceased_N_selected = data.left_items || [];
-
-                                designer.family_deceased_Y_selected.forEach(item => {
-                                    if (item.IsShuWen === undefined) {
-                                        //Vue.set(item, 'IsShuWen', false);
-                                    }
-                                });
-                                if (designer.family_deceased_Y_selected.length > 0) {
-                                    designer.isAllSelected = this.family_deceased_Y_selected.every(member => member.IsShuWen === true);
-                                } else {
-                                    designer.isAllSelected = false;
-                                }
-
+                                designer.family_deceased_Y_selected = parsedData.mid_items || [];
+                                designer.family_deceased_N_selected = parsedData.left_items || [];
                             } else {
-                                // A類型：消災、陽上等
                                 designer.family_deceased_Y_selected = [];
-                                designer.family_deceased_N_selected = data.mid_items || [];
-
-                                designer.family_deceased_N_selected.forEach(item => {
-                                    if (item.IsShuWen === undefined) {
-                                        //Vue.set(item, 'IsShuWen', false);
-                                    }
-                                });
-                                if (designer.family_deceased_Y_selected.length > 0) {
-                                    designer.isAllSelected = designer.family_deceased_N_selected.every(member => member.IsShuWen === true);
-
-                                } else {
-                                    designer.isAllSelected = false;
-                                }
-                                //console.log(this.family_deceased_N_selected)
+                                designer.family_deceased_N_selected = parsedData.mid_items || [];
                             }
-                        } catch (e) {
-                            console.error('解析牌位資料時發生錯誤:', e);
-                        }
+                        } catch (err) { console.error('解析牌位資料時發生錯誤:', err); }
                     }
                     designer.resetScreen();
-                    designer.getActItem().then(() => delay(300)).then(() => designer.getData());
-
-
+                    designer.getActItem().then(() => new Promise(res => setTimeout(res, 300))).then(() => {
+                        designer.getTemplateNameList();
+                        designer.getData();
+                    });
                 }
             }
-            //console.log(e.origin, window.parent.location.origin)
-        })
-        );
-        function delay(ms) {
-            return new Promise(resolve => setTimeout(resolve, ms));
-        }
-        $(() => designer.init().then(() => designer.getTabletElement().
-            then(() => designer.getPaperSize().
-                then(() => designer.getTabletStyles().
-                    then(designer.getAllStyleDetails())))));
+        }));
+
+        $(async () => {
+            await designer.init();
+            await Promise.all([
+                designer.getTabletElement(),
+                designer.getPaperSize(),
+                designer.getTabletStyles()
+            ]);
+            await designer.getAllStyleDetails();
+        });
     </script>
 </body>
-
 </html>
\ No newline at end of file