版面設計功能調整

web/admin/item/TabletDesigner.aspx

@@ -15,17 +15,28 @@
     <div class="d-flex overflow-hidden">
         <div class="p-2 bg-dark text-white floting-box" style="width: 250px; left: 20px; top: 80px;">
             <h6 class="border-bottom pb-2">設計工具箱</h6>
-            <select class="form-select form-select-sm " onchange="Designer.changePaper()" id="paperSize">
+            <div class="form-floating mb-3">
+            <select class="form-select form-select-sm mb-2 " onchange="Designer.changePaper()" id="paperSize">
                 <option value="">請選擇</option>
             </select>
-            <div id="paperOrientation" onclick="Designer.changeOrientation()">
+                <label for="paperSize">尺寸</label>
+            </div>
+            <div id="paperOrientation" onclick="Designer.changeOrientation()" class="mb-2">
                 <span></span>
             </div>
             <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('address')">地址欄</span>
             <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('title1')">牌位正名</span>
             <span class="btn btn-sm btn-outline-light w-100 mb-2" onclick="Designer.displayItem('titletriangle')">品字名單</span>
             <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.displayItem('combined')">正名合併置中</span>
-            <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.displayItem()">陽上報恩</span>
+            <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.displayItem('alive')">陽上報恩</span>
+            <div>
+                <span class="btn btn-sm btn-outline-secondary" onclick="Designer.clickBackend()">
+                    <i class="bi bi-upload me-1"></i> 上傳自訂底圖 (PNG/JPG)
+                </span>
+                <input id="backendInp" type="file" accept="image/png, image/jpeg" style="display: none"
+                       >
+            </div>
+            
             <hr>
              
         </div>
@@ -91,24 +102,30 @@
                 //$(".tablet-element").draggable({});
                 this.bindEvents();
                 this.loadConfig();
+                this.bindBackend();
                 this.allSize.forEach(x => {
                     $("#paperSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>")
                 })
                 $("#paperOrientation").html("<span>直向</span>")
             },
             changeOrientation() {
-                this.orientation = this.orientation == "portrait" ? "land" : "portrait";
+                this.orientation = (this.orientation === "portrait" ? "land" : "portrait");
+                console.log(this.orientation);
                 $("#paperOrientation").empty();
-                $("#paperOrientation").html("<span>" + this.orientation == "portrait" ? "直向" : "橫向" + "</span>");
+                let ori = this.orientation == "portrait" ? "直向" : "橫向";
+                console.log(this.orientation,ori)
+                $("#paperOrientation").html("<span>" +ori  + "</span>");
                 let paperSize = $("#paperSize").val()
 
+               
                 let size = this.allSize.find(x => x.name == paperSize)
-                this.paper.width = size.width;
+                console.log(paperSize, size);
-                this.paper.height = size.height;
+                this.paper.width = this.orientation == "portrait" ? size.width : size.height;
+                this.paper.height = this.orientation == "portrait" ? size.height : size.width;
                 $(".tablet-paper").css({
                     "background-color": "red",
-                    width: this.orientation == "portrait" ? size.width : size.height + "mm",
+                    width: this.paper.width + "mm",
-                    height: this.orientation == "portrait" ? size.height : size.width + "mm",
+                    height: this.paper.height + "mm",
                 });
             },
             changePaper() {
@@ -277,9 +294,52 @@
             },
             addElement() {
                 console.log("QQQ");
+            },
+            wrapImageInSvg(imageBase64) {
+                // 建立一個簡單的 SVG 字串，將圖片鋪滿
+                // preserveAspectRatio="none" 確保圖片會拉伸填滿 SVG 容器
+                const svgString = `
+                  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
+                    <image href="${imageBase64}" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" />
+                  </svg>
+                `.trim();
+
+                // 轉成 Data URI 格式
+                // 注意：SVG 內容若包含特殊字元需編碼，但 base64 圖片通常是安全的
+                // 為了保險，我們使用 encodeURIComponent 對 svgString 編碼
+                return `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
+            },
+            clickBackend() {
+                $("#backendInp").click();
+            },
+            bindBackend() {
+                $("#backendInp").on('change', function (e) {
+                    console.log($("#backendInp"))
+                    const input = e.target;
+                    if (input.files && input.files[0]) {
+                        console.log("file:", input.files[0]);
+                        const file = input.files[0];
+
+                        // 1. 先讀取檔案轉成 Base64
+                        const reader = new FileReader();
+                        reader.onload = (e) => {
+                            const base64Image = e.target.result; // 這會是 data:image/png;base64,xxxx...
+
+                            // 2. 將 Base64 PNG 包裝成 SVG
+                            //const svgDataUri = this.wrapImageInSvg(base64Image);
+                            console.log(base64Image)
+                            // 3. 設定到底圖
+                            //this.service.setBackground(svgDataUri);
+                            $(".tablet-paper").css({ 'background-image': 'url(' + base64Image + ')','background-size':'100% 100%' })
+                        };
+
+                        reader.readAsDataURL(file);
+                    }
+                })   
             }
         };
         
+
         $(() => Designer.init());
     </script>
 </asp:Content>

web/admin/item/TabletDesigner.aspx.cs

@@ -63,6 +63,10 @@ public partial class admin_item_TabletDesigner :MyWeb.config
                 {
                     id="combined",type="combined-center",text="林張吳\n氏歷代祖先", x = 130, y = 80,
                     style = new ElementStyle { fontSize = 24, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="hidden" }
+                }, new TabletElement
+                {
+                    id="alive",type="alive",text="劉大哥", x = 60, y = 200,
+                    style = new ElementStyle { fontSize = 18, fontFamily = "Kaiti", isVertical = true, letterSpacing = 5, lineHeight = 1.5 ,visibility="" }
                 }
             },
             paper = new { width = 100, height = 272, name = "Yellow" }