Update index.html

index.html

@@ -115,7 +115,6 @@
             <div class="p-6 border-b border-slate-100 bg-slate-50">
                 <div class="flex justify-between items-center mb-2">
                     <h1 class="text-2xl font-bold text-indigo-600 flex items-center gap-2">
-                        <!-- Top Hat Icon U+1F3A9 -->
                         <span class="text-3xl">🎩</span>
                         摺紙魔術設計師
                     </h1>
@@ -172,10 +171,7 @@
                         @click="clearAllContent"
                         class="w-full py-2 text-sm text-red-600 border border-red-200 bg-red-50 hover:bg-red-100 rounded-lg transition-all flex items-center justify-center gap-1"
                     >
-                        <!-- Trash Icon -->
-                        <svg viewBox="0 0 448 512" class="w-4 h-4 fill-current mr-1">
-                            <path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/>
-                        </svg>
+                        <i class="fa-solid fa-trash-can mr-1"></i>
                         一鍵清空所有內容
                     </button>
                 </div>
@@ -201,16 +197,14 @@
                             @click="exportProject"
                             class="py-2 bg-slate-600 hover:bg-slate-700 text-white font-bold rounded-lg shadow-sm active:scale-95 transition-all flex items-center justify-center gap-1 text-sm"
                         >
-                            <!-- Download Icon -->
-                            <svg viewBox="0 0 512 512" class="w-4 h-4 fill-current mr-1"><path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zM432 456c-13.3 0-24-10.7-24-24s10.7-24 24-24s24 10.7 24 24s-10.7 24-24 24z"/></svg>
+                            <i class="fa-solid fa-download mr-1"></i>
                             匯出存檔
                         </button>
                         <button 
                             @click="triggerImport"
                             class="py-2 bg-slate-600 hover:bg-slate-700 text-white font-bold rounded-lg shadow-sm active:scale-95 transition-all flex items-center justify-center gap-1 text-sm"
                         >
-                            <!-- Upload Icon -->
-                            <svg viewBox="0 0 512 512" class="w-4 h-4 fill-current mr-1"><path d="M288 109.3V352c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352H192c0 35.3 28.7 64 64 64s64-28.7 64-64H448c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V416c0-35.3 28.7-64 64-64zM432 456c13.3 0 24-10.7 24-24s-10.7-24-24-24s-24 10.7 24 24s10.7 24 24 24z"/></svg>
+                            <i class="fa-solid fa-upload mr-1"></i>
                             匯入舊檔
                         </button>
                         <input 
@@ -230,57 +224,87 @@
                         <li v-if="viewMode === 'overview'"><strong>點擊頁面：</strong>進入該頁編輯模式</li>
                         <li v-else><strong>目前編輯：</strong>第 {{ activePageId }} 頁</li>
                         <li><strong>點擊格子：</strong>選取編輯</li>
-                        <li><strong>再次點擊：</strong>旋轉 90°</li>
+                        <li><strong>Ctrl + 點擊：</strong>可多選格子一起編輯</li>
+                        <li><strong>再次點擊：</strong>單選時旋轉 90°</li>
                     </ul>
                 </div>
 
                 <!-- Editing Controls -->
                 <div v-if="viewMode === 'edit'" class="space-y-8 animate-fade-in pb-10">
                     
-                    <!-- Color Picker (New) -->
-                    <div>
-                        <label class="block text-sm font-bold text-slate-700 mb-2">1. 選擇顏色</label>
-                        <div class="flex flex-wrap gap-2">
-                            <button 
-                                v-for="color in colors" 
-                                :key="color"
-                                @click="applyColor(color)"
-                                :disabled="selectedCellIndex === null"
-                                class="w-8 h-8 rounded-full border-2 transition-all shadow-sm active:scale-95 hover:scale-110"
-                                :class="{'ring-2 ring-indigo-400 ring-offset-2': selectedColor === color && selectedCellIndex !== null, 'opacity-50 cursor-not-allowed': selectedCellIndex === null}"
-                                :style="{ backgroundColor: color, borderColor: color === '#ffffff' ? '#e2e8f0' : 'transparent' }"
-                            ></button>
+                    <!-- Selection Summary -->
+                    <div v-if="selectedCellIndices.size > 1" class="bg-indigo-100 px-4 py-2 rounded-lg text-indigo-700 font-bold text-sm text-center">
+                        已選取 {{ selectedCellIndices.size }} 個格子
+                    </div>
+
+                    <!-- Colors -->
+                    <div class="space-y-4">
+                        <!-- Text Color -->
+                        <div>
+                            <label class="block text-sm font-bold text-slate-700 mb-2">1. 文字/圖示顏色</label>
+                            <div class="flex flex-wrap gap-2">
+                                <button 
+                                    v-for="color in colors" 
+                                    :key="color"
+                                    @click="applyColor(color)"
+                                    :disabled="selectedCellIndices.size === 0"
+                                    class="w-8 h-8 rounded-full border-2 transition-all shadow-sm active:scale-95 hover:scale-110"
+                                    :class="{'ring-2 ring-indigo-400 ring-offset-2': selectedColor === color && selectedCellIndices.size > 0, 'opacity-50 cursor-not-allowed': selectedCellIndices.size === 0}"
+                                    :style="{ backgroundColor: color, borderColor: color === '#ffffff' ? '#e2e8f0' : 'transparent' }"
+                                ></button>
+                            </div>
+                        </div>
+                        <!-- Background Color (Macaron) -->
+                        <div>
+                            <label class="block text-sm font-bold text-slate-700 mb-2">2. 背景填充 (淺色系)</label>
+                            <div class="flex flex-wrap gap-2">
+                                <button 
+                                    v-for="bgColor in bgColors" 
+                                    :key="bgColor"
+                                    @click="applyBgColor(bgColor)"
+                                    :disabled="selectedCellIndices.size === 0"
+                                    class="w-8 h-8 rounded border transition-all shadow-sm active:scale-95 hover:scale-110 relative"
+                                    :class="{'ring-2 ring-indigo-400 ring-offset-2': selectedBgColor === bgColor && selectedCellIndices.size > 0, 'opacity-50 cursor-not-allowed': selectedCellIndices.size === 0}"
+                                    :style="{ backgroundColor: bgColor, borderColor: '#e2e8f0' }"
+                                >
+                                    <!-- Slash for transparent/white -->
+                                    <div v-if="bgColor === '#ffffff'" class="absolute inset-0 flex items-center justify-center pointer-events-none">
+                                        <div class="w-full h-px bg-slate-300 transform rotate-45"></div>
+                                    </div>
+                                </button>
+                            </div>
                         </div>
                     </div>
 
                     <!-- Text Input -->
                     <div>
-                        <label class="block text-sm font-bold text-slate-700 mb-2">2. 文字輸入</label>
+                        <label class="block text-sm font-bold text-slate-700 mb-2">3. 文字輸入 (最多3字)</label>
                         <input 
                             ref="textInputRef"
                             type="text" 
                             v-model="inputBuffer" 
                             @input="updateSelectedCellText"
                             placeholder="先點選右側格子..."
-                            maxlength="1"
-                            :disabled="selectedCellIndex === null"
+                            maxlength="3"
+                            :disabled="selectedCellIndices.size === 0"
                             class="w-full text-center text-2xl p-3 border-2 rounded-lg focus:outline-none focus:ring-2 transition-all"
-                            :class="selectedCellIndex === null ? 'bg-slate-100 border-slate-200 cursor-not-allowed' : 'bg-white border-indigo-300 focus:border-indigo-500 focus:ring-indigo-200'"
-                            :style="{ color: selectedCellIndex !== null ? selectedColor : '' }"
+                            :class="selectedCellIndices.size === 0 ? 'bg-slate-100 border-slate-200 cursor-not-allowed' : 'bg-white border-indigo-300 focus:border-indigo-500 focus:ring-indigo-200'"
+                            :style="{ color: selectedCellIndices.size > 0 ? selectedColor : '' }"
                         >
+                        <p class="text-xs text-slate-400 mt-1">提示：輸入 2~3 個字或數字時，字體會自動縮小。</p>
                     </div>
 
                     <!-- Icon Picker -->
                     <div>
-                        <label class="block text-sm font-bold text-slate-700 mb-3">3. 選擇圖示</label>
+                        <label class="block text-sm font-bold text-slate-700 mb-3">4. 選擇圖示</label>
                         <div class="grid grid-cols-4 gap-2 max-h-60 overflow-y-auto p-1 custom-scrollbar">
                             <button 
                                 v-for="(val, name) in icons" 
                                 :key="name"
                                 @click="applyIconToCell(name)"
-                                :disabled="selectedCellIndex === null"
+                                :disabled="selectedCellIndices.size === 0"
                                 class="aspect-square flex items-center justify-center rounded-lg border hover:bg-indigo-50 active:scale-95 transition-all"
-                                :class="selectedCellIndex === null ? 'border-slate-200 text-slate-300 cursor-not-allowed' : 'border-slate-300 text-slate-600 hover:border-indigo-400 hover:text-indigo-600 cursor-pointer'"
+                                :class="selectedCellIndices.size === 0 ? 'border-slate-200 text-slate-300 cursor-not-allowed' : 'border-slate-300 text-slate-600 hover:border-indigo-400 hover:text-indigo-600 cursor-pointer'"
                                 :title="name"
                             >
                                 <span class="text-3xl leading-none select-none">{{ val }}</span>
@@ -291,7 +315,7 @@
                     <!-- Image Upload -->
                     <div>
                         <div class="flex justify-between items-center mb-3">
-                            <label class="block text-sm font-bold text-slate-700">4. 自定義圖片</label>
+                            <label class="block text-sm font-bold text-slate-700">5. 自定義圖片</label>
                             <button 
                                 @click="triggerImageUpload"
                                 class="text-xs bg-indigo-100 text-indigo-700 px-2 py-1 rounded hover:bg-indigo-200 font-bold flex items-center gap-1"
@@ -310,9 +334,9 @@
                                 v-for="(imgSrc, idx) in customImages" 
                                 :key="idx"
                                 @click="applyCustomImageToCell(imgSrc)"
-                                :disabled="selectedCellIndex === null"
+                                :disabled="selectedCellIndices.size === 0"
                                 class="aspect-square flex items-center justify-center rounded-lg border overflow-hidden relative hover:opacity-90 active:scale-95 transition-all bg-white"
-                                :class="selectedCellIndex === null ? 'border-slate-200 cursor-not-allowed opacity-50' : 'border-slate-300 cursor-pointer hover:border-indigo-400 ring-offset-1'"
+                                :class="selectedCellIndices.size === 0 ? 'border-slate-200 cursor-not-allowed opacity-50' : 'border-slate-300 cursor-pointer hover:border-indigo-400 ring-offset-1'"
                             >
                                 <img :src="imgSrc" class="w-full h-full object-cover">
                                 <!-- Delete Button -->
@@ -322,20 +346,19 @@
                     </div>
 
                     <!-- Cell Info -->
-                    <div v-if="selectedCellIndex !== null" class="bg-slate-100 p-4 rounded-lg flex justify-between items-center">
-                        <div>
-                            <span class="text-xs font-bold text-slate-500 uppercase">角度</span>
-                            <span class="text-lg font-mono font-bold text-slate-700 ml-2">{{ activePageCells[selectedCellIndex].rotation }}°</span>
+                    <div v-if="selectedCellIndices.size > 0" class="bg-slate-100 p-4 rounded-lg flex justify-between items-center">
+                        <div class="text-sm font-bold text-slate-600">
+                            已選 {{ selectedCellIndices.size }} 格
                         </div>
                         <button @click="rotateCurrentCell" class="px-3 py-1 bg-white border border-slate-300 rounded shadow-sm text-sm">
-                            手動旋轉
+                            旋轉選取項目 (90°)
                         </button>
                     </div>
 
                     <div>
                         <button 
                             @click="clearCurrentCell" 
-                            :disabled="selectedCellIndex === null"
+                            :disabled="selectedCellIndices.size === 0"
                             class="w-full py-2 text-sm text-red-500 border border-red-200 rounded hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
                         >
                             清除內容
@@ -442,9 +465,10 @@
                                     v-for="(cell, index) in pages[pageId-1].cells" 
                                     :key="cell.id"
                                     class="grid-cell relative border border-slate-300"
+                                    :style="{ backgroundColor: cell.bgColor }"
                                 >
                                     <div class="rotation-wrapper" :style="{ transform: `rotate(${cell.rotation}deg)` }">
-                                        <span v-if="cell.type === 'text'" class="text-4xl font-bold cell-text" :style="{ color: cell.color }">{{ cell.content }}</span>
+                                        <span v-if="cell.type === 'text'" class="font-bold cell-text" :class="getFontSizeClass(cell.content)" :style="{ color: cell.color }">{{ cell.content }}</span>
                                         
                                         <!-- Render Icon: Emoji -->
                                         <span v-if="cell.type === 'icon'" class="text-3xl leading-none select-none">{{ icons[cell.content] }}</span>
@@ -486,12 +510,13 @@
                             <div 
                                 v-for="(cell, index) in activePageCells" 
                                 :key="cell.id"
-                                @click="handleCellClick(index)"
+                                @click="handleCellClick(index, $event)"
                                 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 }"
+                                :class="{ 'ring-4 ring-indigo-500 ring-inset z-20': selectedCellIndices.has(index) }"
+                                :style="{ backgroundColor: cell.bgColor }"
                             >
                                 <div class="rotation-wrapper pointer-events-none" :style="{ transform: `rotate(${cell.rotation}deg)` }">
-                                    <span v-if="cell.type === 'text'" class="text-5xl md:text-7xl font-bold cell-text block" :style="{ color: cell.color }">
+                                    <span v-if="cell.type === 'text'" class="font-bold cell-text block" :class="getFontSizeClass(cell.content)" :style="{ color: cell.color }">
                                         {{ cell.content }}
                                     </span>
                                     
@@ -540,6 +565,9 @@
 
             // --- Colors ---
             const colors = ['#1e293b', '#ef4444', '#f97316', '#f59e0b', '#22c55e', '#14b8a6', '#3b82f6', '#6366f1', '#a855f7', '#ec4899'];
+            
+            // --- Background Colors (Macaron) ---
+            const bgColors = ['#ffffff', '#fecaca', '#fed7aa', '#fef08a', '#bbf7d0', '#a5f3fc', '#bfdbfe', '#ddd6fe', '#fbcfe8', '#e2e8f0'];
 
             // --- Icons (Unified to Unicode Emoji) ---
             const icons = {
@@ -568,7 +596,8 @@
                 type: 'text',
                 content: '',
                 rotation: 0,
-                color: '#1e293b' // Default color
+                color: '#1e293b', // Default text color
+                bgColor: '#ffffff' // Default bg color
             }));
 
             const pages = ref([
@@ -578,9 +607,13 @@
 
             const viewMode = ref('overview');
             const activePageId = ref(1);
-            const selectedCellIndex = ref(null);
+            
+            // Replaced single index with Set for multi-select
+            const selectedCellIndices = ref(new Set());
+            
             const inputBuffer = ref('');
             const selectedColor = ref('#1e293b');
+            const selectedBgColor = ref('#ffffff');
             const isGenerating = ref(false);
             
             // Refs
@@ -604,12 +637,25 @@
 
             const activePageCells = computed(() => pages.value[activePageId.value - 1].cells);
             
-            // Computed for UI style of custom button
             const isCustomGridActive = computed(() => {
-                // If current config matches none of the preset labels, it's custom
                 return !gridOptions.some(opt => opt.label === currentGrid.value.label);
             });
 
+            // --- Helper: Dynamic Font Size ---
+            const getFontSizeClass = (content) => {
+                const len = content ? content.length : 0;
+                if (len >= 3) return 'text-3xl md:text-5xl';
+                if (len === 2) return 'text-4xl md:text-6xl';
+                return 'text-5xl md:text-7xl';
+            };
+
+            const getFontSizeForPdf = (content) => {
+                const len = content ? content.length : 0;
+                if (len >= 3) return "40";
+                if (len === 2) return "50";
+                return "60";
+            };
+
             // --- Actions ---
 
             const changeGridSize = (conf) => {
@@ -628,7 +674,7 @@
                     { id: 2, cells: createPageCells(totalCells, conf.rows, conf.cols) }
                 ];
                 
-                selectedCellIndex.value = null;
+                selectedCellIndices.value.clear();
                 activePageId.value = 1;
                 viewMode.value = 'overview';
             };
@@ -640,7 +686,6 @@
                     if(!confirm("設定自訂網格將會清空您目前的設計，確定要��續嗎？")) return;
                 }
                 
-                // Set initial values from current grid
                 customGridConfig.value.rows = currentGrid.value.rows;
                 customGridConfig.value.cols = currentGrid.value.cols;
                 showGridModal.value = true;
@@ -664,7 +709,7 @@
                     { id: 2, cells: createPageCells(totalCells, r, c) }
                 ];
 
-                selectedCellIndex.value = null;
+                selectedCellIndices.value.clear();
                 activePageId.value = 1;
                 viewMode.value = 'overview';
                 showGridModal.value = false;
@@ -687,13 +732,13 @@
                         { id: 2, cells: createPageCells(totalCells, rows, cols) }
                     ];
 
-                    selectedCellIndex.value = null;
+                    selectedCellIndices.value.clear();
                     inputBuffer.value = '';
                     alert("內容已清空！");
                 }
             };
 
-            const setCell = (pageIndex, row, col, type, content, rotation = 0, color = '#1e293b') => {
+            const setCell = (pageIndex, row, col, type, content, rotation = 0, color = '#1e293b', bgColor='#ffffff') => {
                 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);
@@ -702,14 +747,22 @@
                     cells[index].content = content;
                     cells[index].rotation = rotation;
                     cells[index].color = color;
+                    cells[index].bgColor = bgColor;
                 }
             };
 
             const applyColor = (color) => {
-                if (selectedCellIndex.value === null) return;
-                const cell = activePageCells.value[selectedCellIndex.value];
-                cell.color = color;
                 selectedColor.value = color;
+                selectedCellIndices.value.forEach(index => {
+                    activePageCells.value[index].color = color;
+                });
+            };
+
+            const applyBgColor = (bgColor) => {
+                selectedBgColor.value = bgColor;
+                selectedCellIndices.value.forEach(index => {
+                    activePageCells.value[index].bgColor = bgColor;
+                });
             };
 
             // --- Image Upload Logic ---
@@ -766,10 +819,11 @@
             };
 
             const applyCustomImageToCell = (imgSrc) => {
-                if (selectedCellIndex.value === null) return;
-                const cell = activePageCells.value[selectedCellIndex.value];
-                cell.type = 'image';
-                cell.content = imgSrc;
+                selectedCellIndices.value.forEach(index => {
+                    const cell = activePageCells.value[index];
+                    cell.type = 'image';
+                    cell.content = imgSrc;
+                });
                 inputBuffer.value = '';
             };
 
@@ -783,7 +837,7 @@
 
             const exportProject = () => {
                 const projectData = {
-                    version: '1.5',
+                    version: '1.6',
                     timestamp: new Date().toISOString(),
                     grid: currentGrid.value,
                     pages: pages.value,
@@ -823,7 +877,7 @@
                             customImages.value = importedData.customImages;
                         }
 
-                        selectedCellIndex.value = null;
+                        selectedCellIndices.value.clear();
                         activePageId.value = 1;
                         viewMode.value = 'overview';
                         
@@ -857,33 +911,33 @@
                         // 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, 2, 3, 'icon', '幸運草', 0, '#22c55e');
+                        setCell(0, 2, 4, 'icon', '幸運草', 0, '#22c55e');
+                        setCell(0, 3, 3, 'icon', '幸運草', 0, '#22c55e');
+                        setCell(0, 3, 4, 'icon', '幸運草', 0, '#22c55e');
                         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, 3, 'icon', '幸運草', 0, '#22c55e');
+                        setCell(0, 6, 4, 'icon', '幸運草', 0, '#22c55e');
                         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, 7, 3, 'icon', '幸運草', 0, '#22c55e');
+                        setCell(0, 7, 4, 'icon', '幸運草', 0, '#22c55e');
                         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, 2, 6, 'icon', '幸運草', 0, '#22c55e');
                         setCell(1, 5, 5, 'text', '茫', 0);
-                        setCell(1, 5, 6, 'icon', '幸運草', 0);
+                        setCell(1, 5, 6, 'icon', '幸運草', 0, '#22c55e');
                         setCell(1, 6, 5, 'text', '人', 0);
-                        setCell(1, 6, 6, 'icon', '幸運草', 0);
-                        setCell(1, 7, 6, 'icon', '幸運草', 0);
+                        setCell(1, 6, 6, 'icon', '幸運草', 0, '#22c55e');
+                        setCell(1, 7, 6, 'icon', '幸運草', 0, '#22c55e');
                         setCell(1, 8, 6, 'text', '海', 180);
                     }
 
-                    selectedCellIndex.value = null;
+                    selectedCellIndices.value.clear();
                     activePageId.value = 1;
                     viewMode.value = 'overview';
                     
@@ -898,54 +952,95 @@
             const switchToPage = (pageId) => {
                 activePageId.value = pageId;
                 viewMode.value = 'edit';
-                selectedCellIndex.value = null;
+                selectedCellIndices.value.clear();
                 inputBuffer.value = '';
             };
 
-            const handleCellClick = (index) => {
-                if (selectedCellIndex.value !== index) {
-                    selectedCellIndex.value = index;
-                    const cell = activePageCells.value[index];
-                    inputBuffer.value = (cell.type === 'text') ? cell.content : '';
-                    selectedColor.value = cell.color; // Sync color picker
-                    nextTick(() => { if (textInputRef.value) textInputRef.value.focus(); });
-                } else {
-                    rotateCurrentCell();
+            // Enhanced Click Handler for Multi-select
+            const handleCellClick = (index, event) => {
+                // If Ctrl/Meta key is pressed, toggle selection
+                if (event && (event.ctrlKey || event.metaKey)) {
+                    if (selectedCellIndices.value.has(index)) {
+                        selectedCellIndices.value.delete(index);
+                    } else {
+                        selectedCellIndices.value.add(index);
+                    }
+                    
+                    // If we have single selection after toggle, setup buffer
+                    if (selectedCellIndices.value.size === 1) {
+                        const idx = [...selectedCellIndices.value][0];
+                        const cell = activePageCells.value[idx];
+                        inputBuffer.value = (cell.type === 'text') ? cell.content : '';
+                        selectedColor.value = cell.color;
+                        selectedBgColor.value = cell.bgColor;
+                        nextTick(() => { if (textInputRef.value) textInputRef.value.focus(); });
+                    } else {
+                        inputBuffer.value = ''; // Multi-select clears buffer to avoid confusion
+                    }
+                } 
+                else {
+                    // Normal click without modifiers
+                    
+                    // If clicking an already selected cell when it is the ONLY selected cell -> Rotate
+                    if (selectedCellIndices.value.has(index) && selectedCellIndices.value.size === 1) {
+                        rotateCurrentCell();
+                    } 
+                    else {
+                        // Otherwise, reset selection to just this one
+                        selectedCellIndices.value.clear();
+                        selectedCellIndices.value.add(index);
+                        
+                        const cell = activePageCells.value[index];
+                        inputBuffer.value = (cell.type === 'text') ? cell.content : '';
+                        selectedColor.value = cell.color;
+                        selectedBgColor.value = cell.bgColor;
+                        nextTick(() => { if (textInputRef.value) textInputRef.value.focus(); });
+                    }
                 }
             };
 
             const rotateCurrentCell = () => {
-                if (selectedCellIndex.value === null) return;
-                const cell = activePageCells.value[selectedCellIndex.value];
-                cell.rotation = (cell.rotation + 90) % 360;
+                if (selectedCellIndices.value.size === 0) return;
+                selectedCellIndices.value.forEach(index => {
+                    const cell = activePageCells.value[index];
+                    cell.rotation = (cell.rotation + 90) % 360;
+                });
             };
 
             const updateSelectedCellText = () => {
-                if (selectedCellIndex.value === null) return;
-                const cell = activePageCells.value[selectedCellIndex.value];
-                cell.type = 'text';
-                cell.content = inputBuffer.value;
-                cell.color = selectedColor.value; // Apply current color
+                if (selectedCellIndices.value.size === 0) return;
+                selectedCellIndices.value.forEach(index => {
+                    const cell = activePageCells.value[index];
+                    cell.type = 'text';
+                    cell.content = inputBuffer.value;
+                    cell.color = selectedColor.value; 
+                });
             };
 
             const applyIconToCell = (iconName) => {
-                if (selectedCellIndex.value === null) return;
-                const cell = activePageCells.value[selectedCellIndex.value];
-                cell.type = 'icon';
-                cell.content = iconName;
-                cell.color = selectedColor.value; // Apply current color (though emoji mostly ignores it)
+                if (selectedCellIndices.value.size === 0) return;
+                selectedCellIndices.value.forEach(index => {
+                    const cell = activePageCells.value[index];
+                    cell.type = 'icon';
+                    cell.content = iconName;
+                    cell.color = selectedColor.value;
+                });
                 inputBuffer.value = '';
             };
 
             const clearCurrentCell = () => {
-                if (selectedCellIndex.value === null) return;
-                const cell = activePageCells.value[selectedCellIndex.value];
-                cell.content = '';
-                cell.type = 'text';
-                cell.rotation = 0;
-                cell.color = '#1e293b'; // Reset color
+                if (selectedCellIndices.value.size === 0) return;
+                selectedCellIndices.value.forEach(index => {
+                    const cell = activePageCells.value[index];
+                    cell.content = '';
+                    cell.type = 'text';
+                    cell.rotation = 0;
+                    cell.color = '#1e293b'; 
+                    cell.bgColor = '#ffffff'; // Reset BG
+                });
                 inputBuffer.value = '';
                 selectedColor.value = '#1e293b';
+                selectedBgColor.value = '#ffffff';
             };
 
             // --- Auto Save & Init ---
@@ -983,7 +1078,7 @@
             });
 
             // Helper to replace text element with SVG for perfect centering
-            const replaceWithSvgText = (el, content, color, fontFamily, fontWeight) => {
+            const replaceWithSvgText = (el, content, color, fontFamily, fontWeight, fontSize) => {
                 const ns = "http://www.w3.org/2000/svg";
                 const svg = document.createElementNS(ns, "svg");
                 svg.setAttribute("width", "100%");
@@ -1001,7 +1096,7 @@
                 textNode.setAttribute("fill", color);
                 textNode.setAttribute("font-family", fontFamily);
                 textNode.setAttribute("font-weight", fontWeight);
-                textNode.setAttribute("font-size", "60"); 
+                textNode.setAttribute("font-size", fontSize); 
                 textNode.textContent = content;
 
                 svg.appendChild(textNode);
@@ -1031,22 +1126,22 @@
                 
                 pageData.cells.forEach((cell, idx) => {
                     let contentHtml = '';
+                    // Dynamic Font Size for Export
+                    const fontSize = getFontSizeForPdf(cell.content);
+
                     if (cell.type === 'text') {
                         // Text uses the SVG text replacement trick for perfect centering
-                        contentHtml = `<span class="export-text" data-color="${cell.color}" style="font-size: 40px; font-weight: bold; color: ${cell.color}; font-family: 'Noto Sans TC', sans-serif;">${cell.content}</span>`;
+                        contentHtml = `<span class="export-text" data-color="${cell.color}" data-size="${fontSize}" style="font-size: ${fontSize}px; font-weight: bold; color: ${cell.color}; font-family: 'Noto Sans TC', sans-serif;">${cell.content}</span>`;
                     } else if (cell.type === 'icon') {
                         // Icon (Emoji) -> Treat as Text for Export to fix offset
-                        // We use the same 'export-text' class so it gets replaced by SVG text
                         const iconChar = icons[cell.content];
-                        contentHtml = `<span class="export-text" data-color="${cell.color}" style="font-size: 50px; line-height: 1; user-select: none;">${iconChar}</span>`;
+                        contentHtml = `<span class="export-text" data-color="${cell.color}" data-size="50" style="font-size: 50px; line-height: 1; user-select: none;">${iconChar}</span>`;
                     } else if (cell.type === 'image') {
                         contentHtml = `<img src="${cell.content}" style="width: 80%; height: 80%; object-fit: contain;">`;
                     }
 
-                    // Coordinate span REMOVED here
-
                     gridHtml += `
-                        <div class="grid-cell" style="position: relative; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; overflow: hidden;">
+                        <div class="grid-cell" style="position: relative; border: 1px solid #cbd5e1; background-color: ${cell.bgColor}; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                             <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: rotate(${cell.rotation}deg);">
                                 ${contentHtml}
                             </div>
@@ -1070,8 +1165,9 @@
                         textElements.forEach(el => {
                             const textContent = el.innerText;
                             const color = el.getAttribute('data-color');
+                            const size = el.getAttribute('data-size') || "60";
                             if (!textContent) return;
-                            replaceWithSvgText(el, textContent, color, "'Noto Sans TC', sans-serif", "bold");
+                            replaceWithSvgText(el, textContent, color, "'Noto Sans TC', sans-serif", "bold", size);
                         });
                     }
                 });
@@ -1080,7 +1176,7 @@
             };
 
             const exportPDF = async () => {
-                if (selectedCellIndex.value !== null) selectedCellIndex.value = null;
+                if (selectedCellIndices.value.size > 0) selectedCellIndices.value.clear();
                 isGenerating.value = true;
                 
                 try {
@@ -1117,12 +1213,15 @@
                 viewMode,
                 activePageId,
                 activePageCells,
-                selectedCellIndex,
+                selectedCellIndices,
                 inputBuffer,
                 icons,
                 colors,
+                bgColors,
                 selectedColor,
+                selectedBgColor,
                 applyColor,
+                applyBgColor,
                 textInputRef,
                 isGenerating,
                 switchToPage,
@@ -1154,7 +1253,8 @@
                 customGridConfig,
                 openCustomGridModal,
                 confirmCustomGrid,
-                isCustomGridActive
+                isCustomGridActive,
+                getFontSizeClass
             };
         }
     }).mount('#app');