Update index.html

index.html

@@ -41,24 +41,12 @@
             transition: transform 0.3s ease-in-out;
         }
 
-        /* 讓文字在編輯模式下也看起來很置中 */
         .cell-text {
             line-height: 1;
             display: block;
-            padding-bottom: 0.1em; /* 視覺微調 */
+            padding-bottom: 0.1em;
         }
 
-        /* 頁面切換特效 */
-        .page-transition-enter-active,
-        .page-transition-leave-active {
-            transition: opacity 0.3s ease;
-        }
-        .page-transition-enter-from,
-        .page-transition-leave-to {
-            opacity: 0;
-        }
-
-        /* 預覽模式下的頁面縮放特效 */
         .preview-page {
             transform-origin: center center;
             cursor: pointer;
@@ -71,14 +59,12 @@
             z-index: 10;
         }
 
-        /* PDF 生成時的隱藏容器 */
         #pdf-generator-container {
             position: absolute;
             top: -9999px;
             left: -9999px;
         }
 
-        /* 隱藏滾動條但保留功能 (Chromium) */
         .no-scrollbar::-webkit-scrollbar {
             display: none;
         }
@@ -106,7 +92,7 @@
                     魔法摺紙設計
                 </h1>
                 
-                <!-- Page Navigator in Header -->
+                <!-- Page Navigator -->
                 <div class="mt-4 flex bg-slate-200 p-1 rounded-lg">
                     <button 
                         @click="viewMode = 'overview'"
@@ -129,6 +115,35 @@
 
             <!-- Scrollable Content -->
             <div class="flex-1 overflow-y-auto p-6 space-y-8">
+
+                <!-- Grid Settings -->
+                <div>
+                    <label class="block text-sm font-bold text-slate-700 mb-2">📐 網格設定 (點擊切換)</label>
+                    <div class="grid grid-cols-3 gap-2">
+                        <button 
+                            v-for="conf in gridOptions" 
+                            :key="conf.label"
+                            @click="changeGridSize(conf)"
+                            class="py-2 text-sm border rounded-lg transition-all active:scale-95"
+                            :class="currentGrid.rows === conf.rows && currentGrid.cols === conf.cols ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-600 border-slate-300 hover:bg-slate-50'"
+                        >
+                            {{ conf.label }}
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Template -->
+                <div>
+                    <label class="block text-sm font-bold text-slate-700 mb-2">🎁 快速模板</label>
+                    <button 
+                        @click="applyTemplate('lucky')"
+                        class="w-full py-3 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-bold rounded-lg shadow-md hover:shadow-lg active:scale-95 transition-all flex items-center justify-center gap-2"
+                    >
+                        <svg viewBox="0 0 24 24" class="w-5 h-5 fill-current"><path d="M12,2C9,2,6,4,6,7c0-2,3-5,3-5S6,0,9,0c4,0,5,5,2,8c3-3,8-2,8,2s-5,5-8,2c2,2,2,7,0,7c0-3-3-5-3-5s-1,4-4,4c0-4,5-5,2-8C6,13,1,12,1,8C1,8,6,7,9,10C10,11,11,11,12,10C13,9,12,2,12,2z"></path></svg>
+                        套用：幸運遇見你 (如皓老師版)
+                    </button>
+                    <p class="text-xs text-slate-400 mt-2">提示：套用後會自動切換為 6x8 網格並填入內容。</p>
+                </div>
                 
                 <!-- Instruction -->
                 <div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100 text-sm text-indigo-800">
@@ -141,7 +156,7 @@
                     </ul>
                 </div>
 
-                <!-- Editing Controls (Only visible in Edit Mode) -->
+                <!-- Editing Controls -->
                 <div v-if="viewMode === 'edit'" class="space-y-8 animate-fade-in">
                     <!-- Text Input -->
                     <div>
@@ -232,21 +247,26 @@
              ======================= -->
         <div class="flex-1 bg-slate-200 overflow-auto relative no-scrollbar">
             
-            <!-- Workspace Centerer (Changed to flex-col to stack credits below) -->
             <div class="min-h-full flex flex-col items-center justify-center p-4 md:p-8 relative z-10">
 
-                <!-- OVERVIEW MODE: Side by Side -->
+                <!-- OVERVIEW MODE -->
                 <div v-if="viewMode === 'overview'" class="flex flex-row flex-wrap gap-8 justify-center items-center">
                     <div v-for="pageId in [1, 2]" :key="pageId" class="flex flex-col items-center">
                         <h2 class="text-lg font-bold text-slate-600 mb-2">第 {{ pageId }} 頁</h2>
-                        <!-- Scaled Down Preview: Width ~120mm to fit side-by-side on laptop screens -->
                         <div 
                             class="bg-white shadow-xl preview-page relative"
                             style="width: 120mm; height: 170mm;" 
                             @click="switchToPage(pageId)"
                         >
-                            <!-- Grid Component (Read Only in Overview) -->
-                            <div class="grid grid-cols-6 grid-rows-8 gap-0 border border-slate-200 w-full h-full pointer-events-none">
+                            <!-- Added :key to force re-render when grid changes -->
+                            <div 
+                                class="grid gap-0 border border-slate-200 w-full h-full pointer-events-none"
+                                :key="currentGrid.label"
+                                :style="{
+                                    gridTemplateColumns: `repeat(${currentGrid.cols}, 1fr)`,
+                                    gridTemplateRows: `repeat(${currentGrid.rows}, 1fr)`
+                                }"
+                            >
                                 <div 
                                     v-for="(cell, index) in pages[pageId-1].cells" 
                                     :key="cell.id"
@@ -262,25 +282,30 @@
                     </div>
                 </div>
 
-                <!-- EDIT MODE: Show Single Active Page -->
+                <!-- EDIT MODE -->
                 <div v-else class="flex flex-col gap-2 animate-fade-in">
-                    <!-- Back to Overview Button -->
                     <button @click="viewMode = 'overview'" class="self-start text-slate-500 hover:text-indigo-600 font-bold text-sm flex items-center gap-1">
                         ← 回到全覽
                     </button>
 
-                    <!-- Active Page Canvas -->
                     <div 
                         :id="`edit-canvas-${activePageId}`" 
                         class="bg-white shadow-2xl relative"
                         style="width: 210mm; height: 297mm; padding: 0mm;"
                     >
-                        <!-- A4 Watermark -->
                         <div class="absolute bottom-1 right-2 text-slate-200 text-[10px] font-sans select-none z-0">
-                            Page {{ activePageId }} - Magic Origami
+                            Page {{ activePageId }} - {{ currentGrid.rows }}x{{ currentGrid.cols }}
                         </div>
 
-                        <div class="grid grid-cols-6 grid-rows-8 gap-0 border border-slate-200 w-full h-full">
+                        <!-- Added :key here too -->
+                        <div 
+                            class="grid gap-0 border border-slate-200 w-full h-full"
+                            :key="currentGrid.label + activePageId"
+                            :style="{
+                                gridTemplateColumns: `repeat(${currentGrid.cols}, 1fr)`,
+                                gridTemplateRows: `repeat(${currentGrid.rows}, 1fr)`
+                            }"
+                        >
                             <div 
                                 v-for="(cell, index) in activePageCells" 
                                 :key="cell.id"
@@ -288,9 +313,11 @@
                                 class="grid-cell relative border border-slate-300 cursor-pointer hover:bg-slate-50 select-none"
                                 :class="{ 'ring-4 ring-indigo-500 ring-inset z-20': selectedCellIndex === index }"
                             >
+                                <!-- Grid Coordinate -->
                                 <span class="absolute top-1 left-1 text-[8px] text-slate-200 pointer-events-none z-10">
-                                    {{ Math.floor(index / 6) + 1 }}-{{ (index % 6) + 1 }}
+                                    {{ Math.floor(index / currentGrid.cols) + 1 }}-{{ (index % currentGrid.cols) + 1 }}
                                 </span>
+
                                 <div class="rotation-wrapper pointer-events-none" :style="{ transform: `rotate(${cell.rotation}deg)` }">
                                     <span v-if="cell.type === 'text'" class="text-4xl md:text-5xl font-bold text-slate-800 cell-text block">
                                         {{ cell.content }}
@@ -302,8 +329,7 @@
                     </div>
                 </div>
 
-                <!-- Credits / Watermark (Moved Here) -->
-                <!-- Use 'mt-8' to add margin top, preventing overlap with the canvas -->
+                <!-- Credits -->
                 <div class="mt-8 text-center w-full max-w-2xl">
                     <div class="text-xs text-slate-400 font-sans space-y-1 bg-slate-100/50 p-4 rounded-lg inline-block text-left border border-slate-200">
                         <p>靈感來源：台北市興雅國中 吳如皓老師 《摺紙中的數學魔術》</p>
@@ -318,46 +344,33 @@
             </div>
         </div>
 
-        <!-- Hidden Container for PDF Rendering -->
-        <div id="pdf-generator-container">
-            <!-- This will be populated dynamically -->
-        </div>
-
+        <div id="pdf-generator-container"></div>
     </div>
 
     <script>
-        const { createApp, ref, computed, nextTick } = Vue;
-        const { jsPDF } = window.jspdf;
-
-        createApp({
-            setup() {
-                // --- State ---
-                // Two pages, each with 48 cells
-                const createPageCells = (pageOffset) => Array.from({ length: 48 }, (_, i) => ({
-                    id: pageOffset + i,
-                    type: 'text',
-                    content: '',
-                    rotation: 0
-                }));
-
-                const pages = ref([
-                    { id: 1, cells: createPageCells(0) },
-                    { id: 2, cells: createPageCells(48) }
-                ]);
-
-                const viewMode = ref('overview'); // 'overview' | 'edit'
-                const activePageId = ref(1);
-                const selectedCellIndex = ref(null);
-                const inputBuffer = ref('');
-                const isGenerating = ref(false);
-                const textInputRef = ref(null);
-
-                // --- Computed ---
-                const activePageCells = computed(() => pages.value[activePageId.value - 1].cells);
-
-                // --- Icons ---
-                const icons = {
-                    '愛心': 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
+    const { createApp, ref, computed, nextTick } = Vue;
+    const { jsPDF } = window.jspdf;
+
+    createApp({
+        setup() {
+            // --- Configuration ---
+            const gridOptions = [
+                { label: '4x4', rows: 4, cols: 4 },
+                { label: '6x8', rows: 8, cols: 6 },
+                { label: '8x8', rows: 8, cols: 8 }
+            ];
+            const currentGrid = ref(gridOptions[1]); // Default 6x8
+
+            // --- Icons (Updated Clover) ---
+            const icons = {
+                // 修正後的幸運草：四個愛心尖端朝內 (12,12)
+                '幸運草': `
+                    M12,12 C9,8 5,5 5,3 C5,1 7,0 9,0 C10.5,0 11.5,1 12,2 C12.5,1 13.5,0 15,0 C17,0 19,1 19,3 C19,5 15,8 12,12 z
+                    M12,12 C16,9 19,5 21,5 C23,5 24,7 24,9 C24,10.5 23,11.5 22,12 C23,12.5 24,13.5 24,15 C24,17 23,19 21,19 C19,19 16,15 12,12 z
+                    M12,12 C15,16 19,19 19,21 C19,23 17,24 15,24 C13.5,24 12.5,23 12,22 C11.5,23 10.5,24 9,24 C7,24 5,23 5,21 C5,19 9,16 12,12 z
+                    M12,12 C8,15 5,19 3,19 C1,19 0,17 0,15 C0,13.5 1,12.5 2,12 C1,11.5 0,10.5 0,9 C0,7 1,5 3,5 C5,5 8,9 12,12 z
+                `,
+                '愛心': 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
                     '星星': 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z',
                     '勝利': 'M16.5 13c-.55 0-1 .45-1 1v5h-1v-5c0-.55-.45-1-1-1s-1 .45-1 1v5h-1v-5c0-.55-.45-1-1-1s-1 .45-1 1v2.5c0 .55-.45 1-1 1s-1-.45-1-1V5.63c0-1-.7-1.63-1.6-1.63-.88 0-1.6.82-1.6 1.73V13h-1V5.73C5.3 3.66 7.03 2 9.1 2c1.77 0 3.32 1.22 3.8 2.87.66-1.07 1.8-1.87 3.1-1.87 2.21 0 4 1.79 4 4v6c0 .55-.45 1-1 1s-1-.45-1-1v-1h-1.5v1z M21 16c0 2.97-2.16 5.43-5 5.91V22h-8v-2.09c-2.84-.48-5-2.94-5-5.91h2c0 2.76 2.24 5 5 5s5-2.24 5-5h2z',
                     '獎盃': 'M20.2 6.5C19.7 3.9 17.5 2 15 2H9C6.5 2 4.3 3.9 3.8 6.5L3 11c-.5 2.5 1.2 5 3.8 5.8V17c0 2.2 1.8 4 4 4h2.4c2.2 0 4-1.8 4-4v-.2c2.6-.8 4.3-3.3 3.8-5.8l-.8-4.5zM6.5 10.6l.6-3.8C7.4 4.8 9.1 4 9 4h6c-.1 0 1.6.8 1.9 2.8l.6 3.8c.2 1.3-.8 2.4-2.1 2.4h-9c-1.3 0-2.3-1.1-2.1-2.4z M17 17c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2v-1h10v1z M15 22H9v1h6v-1z',
@@ -375,12 +388,125 @@
                     '禮物': 'M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76 13.38 12 15 10.83 12.92 8H20v6z'
                 };
 
+                // --- State Initialization ---
+                // Helper to create empty cells
+                const createPageCells = (pageOffset, rows, cols) => Array.from({ length: rows * cols }, (_, i) => ({
+                    id: pageOffset + i,
+                    type: 'text',
+                    content: '',
+                    rotation: 0
+                }));
+
+                const pages = ref([
+                    { id: 1, cells: createPageCells(0, 8, 6) },
+                    { id: 2, cells: createPageCells(48, 8, 6) }
+                ]);
+
+                const viewMode = ref('overview');
+                const activePageId = ref(1);
+                const selectedCellIndex = ref(null);
+                const inputBuffer = ref('');
+                const isGenerating = ref(false);
+                const textInputRef = ref(null);
+
+                const activePageCells = computed(() => pages.value[activePageId.value - 1].cells);
+
                 // --- Actions ---
 
+            const changeGridSize = (conf) => {
+                // 移除了 confirm() 對話框，直接執行切換
+                currentGrid.value = conf;
+                const totalCells = conf.rows * conf.cols;
+                
+                // Recreate pages with new dimensions
+                pages.value = [
+                    { id: 1, cells: createPageCells(0, conf.rows, conf.cols) },
+                    { id: 2, cells: createPageCells(totalCells, conf.rows, conf.cols) }
+                ];
+                
+                // Reset view state
+                selectedCellIndex.value = null;
+                activePageId.value = 1;
+                viewMode.value = 'overview';
+            };
+
+            // Helper to set cell content easily using 1-based Row/Col
+                // Row: 1-8, Col: 1-6
+                const setCell = (pageIndex, row, col, type, content, rotation = 0) => {
+                    // Bounds check
+                    if (row > currentGrid.value.rows || col > currentGrid.value.cols) return;
+                    
+                    const cells = pages.value[pageIndex].cells;
+                    const index = (row - 1) * currentGrid.value.cols + (col - 1);
+                    
+                    if (cells[index]) {
+                        cells[index].type = type;
+                        cells[index].content = content;
+                        cells[index].rotation = rotation;
+                    }
+            };
+
+            const applyTemplate = (templateId) => {
+                // 移除了 confirm() 對話框，直接套用模板
+                try {
+                    // 1. Force switch to 6x8 grid
+                    const targetConf = gridOptions[1]; // 6x8
+                    currentGrid.value = targetConf;
+                    const totalCells = 48;
+                    
+                    // Reset Pages
+                    pages.value = [
+                        { id: 1, cells: createPageCells(0, 8, 6) },
+                        { id: 2, cells: createPageCells(48, 8, 6) }
+                    ];
+
+                    if (templateId === 'lucky') {
+                        // Page 1
+                        setCell(0, 1, 3, 'text', '最', 180);
+                        setCell(0, 1, 4, 'text', '是', 180);
+                        setCell(0, 2, 3, 'icon', '幸運草', 0);
+                        setCell(0, 2, 4, 'icon', '幸運草', 0);
+                        setCell(0, 3, 3, 'icon', '幸運草', 0);
+                        setCell(0, 3, 4, 'icon', '幸運草', 0);
+                        setCell(0, 3, 5, 'text', '遇', 0);
+                        setCell(0, 3, 6, 'text', '幸', 0);
+                        setCell(0, 6, 3, 'icon', '幸運草', 0);
+                        setCell(0, 6, 4, 'icon', '幸運草', 0);
+                        setCell(0, 6, 5, 'text', '見', 0);
+                        setCell(0, 6, 6, 'text', '運', 0);
+                        setCell(0, 7, 3, 'icon', '幸運草', 0);
+                        setCell(0, 7, 4, 'icon', '幸運草', 0);
+                        setCell(0, 8, 3, 'text', '就', 180);
+                        setCell(0, 8, 4, 'text', '你', 180);
+
+                        // Page 2
+                        setCell(1, 1, 6, 'text', '茫', 180);
+                        setCell(1, 2, 6, 'icon', '幸運草', 0);
+                        setCell(1, 5, 5, 'text', '茫', 0);
+                        setCell(1, 5, 6, 'icon', '幸運草', 0);
+                        setCell(1, 6, 5, 'text', '人', 0);
+                        setCell(1, 6, 6, 'icon', '幸運草', 0);
+                        setCell(1, 7, 6, 'icon', '幸運草', 0);
+                        setCell(1, 8, 6, 'text', '海', 180);
+                    }
+
+                    // Reset View
+                    selectedCellIndex.value = null;
+                    activePageId.value = 1;
+                    viewMode.value = 'overview';
+                    
+                    alert("模板套用成功！");
+
+                } catch (e) {
+                    console.error(e);
+                    alert("套用模板時發生錯誤，請重試。");
+                }
+            };
+
                 const switchToPage = (pageId) => {
                     activePageId.value = pageId;
                     viewMode.value = 'edit';
-                    selectedCellIndex.value = null; // Reset selection on page switch
+                    selectedCellIndex.value = null;
                     inputBuffer.value = '';
                 };
 
@@ -425,37 +551,31 @@
                     inputBuffer.value = '';
                 };
 
-                // --- Helper: Render a single page to canvas ---
                 const renderPageToCanvas = async (pageId) => {
                     const pageData = pages.value[pageId - 1];
-                    
-                    // Create a temporary DOM element for rendering this specific page off-screen
-                    // We construct the HTML manually to match the structure, but ensuring it's "clean" for export
+                    const rows = currentGrid.value.rows;
+                    const cols = currentGrid.value.cols;
+
                     const container = document.getElementById('pdf-generator-container');
-                    container.innerHTML = ''; // Clear previous
+                    container.innerHTML = '';
 
                     const wrapper = document.createElement('div');
                     wrapper.style.width = '210mm';
                     wrapper.style.height = '297mm';
                     wrapper.style.backgroundColor = 'white';
                     wrapper.style.position = 'relative';
-                    // We don't use grid gap to avoid border doubling issues
                     
-                    // Build the grid HTML string
-                    let gridHtml = `<div style="display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; height: 100%; border: 1px solid #e2e8f0;">`;
+                    let gridHtml = `<div style="display: grid; grid-template-columns: repeat(${cols}, 1fr); grid-template-rows: repeat(${rows}, 1fr); width: 100%; height: 100%; border: 1px solid #e2e8f0;">`;
                     
                     pageData.cells.forEach((cell, idx) => {
-                        // Icon Logic
                         let contentHtml = '';
                         if (cell.type === 'text') {
-                            // Important: Use a span for text
                             contentHtml = `<span class="export-text" style="font-size: 40px; font-weight: bold; color: #1e293b; font-family: 'Noto Sans TC', sans-serif;">${cell.content}</span>`;
                         } else if (cell.type === 'icon') {
                             contentHtml = `<svg viewBox="0 0 24 24" style="width: 60%; height: 60%; fill: #1e293b;"><path d="${icons[cell.content]}"></path></svg>`;
                         }
 
-                        // Grid Coordinate
-                        const coord = `${Math.floor(idx / 6) + 1}-${(idx % 6) + 1}`;
+                        const coord = `${Math.floor(idx / cols) + 1}-${(idx % cols) + 1}`;
 
                         gridHtml += `
                             <div class="grid-cell" style="position: relative; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; overflow: hidden;">
@@ -468,27 +588,22 @@
                     });
                     gridHtml += `</div>`;
                     
-                    // Add watermark
                     gridHtml += `<div style="position: absolute; bottom: 5px; right: 10px; color: #e2e8f0; font-size: 10px; font-family: sans-serif;">Page ${pageId} - Magic Origami</div>`;
 
                     wrapper.innerHTML = gridHtml;
                     container.appendChild(wrapper);
 
-                    // Generate Canvas
                     const canvas = await html2canvas(wrapper, {
-                        scale: 3, // Lower scale slightly for performance with multiple pages, 3 is still high quality
+                        scale: 3,
                         useCORS: true,
                         backgroundColor: '#ffffff',
                         onclone: (clonedDoc) => {
-                            // === The SVG Text Replacement Strategy ===
-                            // Find all text elements in the CLONED document
                             const textElements = clonedDoc.querySelectorAll('.export-text');
                             
                             textElements.forEach(el => {
                                 const textContent = el.innerText;
                                 if (!textContent) return;
 
-                                // 1. Create an SVG element to replace the text span
                                 const ns = "http://www.w3.org/2000/svg";
                                 const svg = document.createElementNS(ns, "svg");
                                 svg.setAttribute("width", "100%");
@@ -498,27 +613,23 @@
                                 svg.style.top = "0";
                                 svg.style.left = "0";
 
-                                // 2. Create the Text node inside SVG
                                 const textNode = document.createElementNS(ns, "text");
                                 textNode.setAttribute("x", "50%");
                                 textNode.setAttribute("y", "50%");
-                                textNode.setAttribute("dominant-baseline", "central"); // The magic attribute for vertical centering
-                                textNode.setAttribute("text-anchor", "middle"); // Horizontal centering
+                                textNode.setAttribute("dominant-baseline", "central");
+                                textNode.setAttribute("text-anchor", "middle");
                                 textNode.setAttribute("fill", "#1e293b");
                                 textNode.setAttribute("font-family", "'Noto Sans TC', sans-serif");
                                 textNode.setAttribute("font-weight", "bold");
-                                // Adjust font size relative to the viewBox (100x100). 
-                                // Since the cell is roughly square, 40-50 is a good percentage.
                                 textNode.setAttribute("font-size", "45"); 
                                 textNode.textContent = textContent;
 
                                 svg.appendChild(textNode);
 
-                                // 3. Replace the original HTML span with this SVG
                                 const parent = el.parentNode;
-                                parent.style.position = "relative"; // Ensure parent can hold absolute SVG
-                                parent.innerHTML = ''; // Clear the HTML text
-                                parent.appendChild(svg); // Inject the SVG
+                                parent.style.position = "relative";
+                                parent.innerHTML = '';
+                                parent.appendChild(svg);
                             });
                         }
                     });
@@ -535,12 +646,10 @@
                         const pdfWidth = 210;
                         const pdfHeight = 297;
 
-                        // Render Page 1
                         const canvas1 = await renderPageToCanvas(1);
                         const imgData1 = canvas1.toDataURL('image/jpeg', 0.95);
                         pdf.addImage(imgData1, 'JPEG', 0, 0, pdfWidth, pdfHeight);
 
-                        // Render Page 2
                         pdf.addPage();
                         const canvas2 = await renderPageToCanvas(2);
                         const imgData2 = canvas2.toDataURL('image/jpeg', 0.95);
@@ -553,12 +662,15 @@
                         alert("PDF 生成發生錯誤");
                     } finally {
                         isGenerating.value = false;
-                        // Clean up temp container
                         document.getElementById('pdf-generator-container').innerHTML = '';
                     }
                 };
 
                 return {
+                    gridOptions,
+                    currentGrid,
+                    changeGridSize,
+                    applyTemplate,
                     pages,
                     viewMode,
                     activePageId,