Update index.html

index.html

@@ -224,7 +224,7 @@
                         <li v-if="viewMode === 'overview'"><strong>點擊頁面：</strong>進入該頁編輯模式</li>
                         <li v-else><strong>目前編輯：</strong>第 {{ activePageId }} 頁</li>
                         <li><strong>點擊格子：</strong>選取編輯</li>
-                        <li><strong>Ctrl + 點擊：</strong>可多選格子一起編輯</li>
+                        <li><strong>複選模式：</strong>開啟下方開關可連續點擊選取</li>
                         <li><strong>再次點擊：</strong>單選時旋轉 90°</li>
                     </ul>
                 </div>
@@ -232,9 +232,39 @@
                 <!-- Editing Controls -->
                 <div v-if="viewMode === 'edit'" class="space-y-8 animate-fade-in pb-10">
                     
+                    <!-- Multi-Select Mode Toggle (NEW) -->
+                    <div class="flex items-center justify-between bg-white p-3 border border-slate-200 rounded-lg shadow-sm">
+                        <span class="text-sm font-bold text-slate-700 flex items-center gap-2">
+                            <i class="fa-solid fa-check-double text-indigo-500"></i>
+                            複選模式
+                        </span>
+                        <button 
+                            @click="toggleMultiSelectMode"
+                            class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                            :class="isMultiSelectMode ? 'bg-indigo-600' : 'bg-slate-200'"
+                        >
+                            <span
+                                class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
+                                :class="isMultiSelectMode ? 'translate-x-6' : 'translate-x-1'"
+                            />
+                        </button>
+                    </div>
+
                     <!-- 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 v-if="selectedCellIndices.size > 0" class="bg-indigo-50 px-4 py-3 rounded-lg border border-indigo-100">
+                        <div class="flex justify-between items-center mb-2">
+                            <div class="text-sm font-bold text-indigo-800">
+                                已選取 {{ selectedCellIndices.size }} 個格子
+                            </div>
+                            <button @click="clearSelection" class="text-xs text-slate-500 hover:text-red-500 underline">
+                                取消選取
+                            </button>
+                        </div>
+                        <div class="flex gap-2">
+                            <button @click="rotateCurrentCell" class="flex-1 px-3 py-1.5 bg-white border border-indigo-200 text-indigo-700 font-bold rounded shadow-sm text-xs hover:bg-indigo-50 transition-all">
+                                <i class="fa-solid fa-rotate-right mr-1"></i> 旋轉 90°
+                            </button>
+                        </div>
                     </div>
 
                     <!-- Colors -->
@@ -278,8 +308,24 @@
 
                     <!-- Text Input -->
                     <div>
-                        <label class="block text-sm font-bold text-slate-700 mb-2">3. 文字輸入 (最多3字)</label>
+                        <label class="block text-sm font-bold text-slate-700 mb-2">3. 文字輸入 (單格最多3字)</label>
+                        <div class="flex gap-2 mb-2" v-if="selectedCellIndices.size > 1">
+                            <input 
+                                ref="batchInputRef"
+                                type="text" 
+                                v-model="batchInputBuffer" 
+                                placeholder="輸入句子依序填入..."
+                                class="flex-1 min-w-0 border-2 border-indigo-200 rounded-lg p-2 text-sm focus:border-indigo-500 focus:outline-none"
+                            >
+                            <button 
+                                @click="applyBatchText"
+                                class="px-3 py-2 bg-indigo-600 text-white font-bold rounded-lg text-sm hover:bg-indigo-700 transition-all whitespace-nowrap"
+                            >
+                                依序填入
+                            </button>
+                        </div>
                         <input 
+                            v-else
                             ref="textInputRef"
                             type="text" 
                             v-model="inputBuffer" 
@@ -291,7 +337,8 @@
                             :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>
+                        <p class="text-xs text-slate-400 mt-1" v-if="selectedCellIndices.size <= 1">提示：輸入 2~3 個字或數字時，字體會自動縮小。</p>
+                        <p class="text-xs text-indigo-500 mt-1 font-bold" v-else>批次模式：按照點選順序（1→{{selectedCellIndices.size}}）依序填入文字。</p>
                     </div>
 
                     <!-- Icon Picker -->
@@ -345,16 +392,6 @@
                         </div>
                     </div>
 
-                    <!-- Cell Info -->
-                    <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" 
@@ -375,7 +412,7 @@
             <!-- Footer Action -->
             <div class="p-6 border-t border-slate-200 bg-slate-50">
                 <button 
-                    @click="exportPDF"
+                    @click="openExportModal"
                     :disabled="isGenerating"
                     class="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl shadow-lg hover:shadow-xl active:scale-95 transition-all flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-wait"
                 >
@@ -435,6 +472,35 @@
                 </div>
             </div>
 
+            <!-- Export PDF Modal -->
+            <div v-if="showExportModal" class="absolute inset-0 z-50 bg-slate-900/50 flex items-center justify-center p-4 animate-fade-in">
+                <div class="bg-white rounded-xl shadow-2xl w-full max-w-sm overflow-hidden">
+                    <div class="bg-indigo-600 px-6 py-4">
+                        <h3 class="text-lg font-bold text-white flex items-center gap-2">
+                            <i class="fa-solid fa-print"></i> 匯出 PDF 設定
+                        </h3>
+                    </div>
+                    <div class="p-6 space-y-4">
+                        <p class="text-sm text-slate-600 mb-2">請輸入資訊以產生專屬浮水印（可略過）：</p>
+                        <div>
+                            <label class="block text-sm font-bold text-slate-700 mb-1">姓名 (選填)</label>
+                            <input type="text" v-model="exportName" placeholder="例如：王小明" class="w-full border-2 border-slate-200 rounded-lg p-2 focus:border-indigo-500 focus:outline-none">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-bold text-slate-700 mb-1">作品名稱 (選填)</label>
+                            <input type="text" v-model="exportProjectName" placeholder="例如：我的幸運草" class="w-full border-2 border-slate-200 rounded-lg p-2 focus:border-indigo-500 focus:outline-none">
+                        </div>
+                    </div>
+                    <div class="bg-slate-50 px-6 py-4 flex justify-end gap-2 border-t border-slate-100">
+                        <button @click="showExportModal = false" class="px-4 py-2 text-slate-600 font-bold hover:bg-slate-200 rounded-lg transition-all">取消</button>
+                        <button @click="processExport" class="px-4 py-2 bg-indigo-600 text-white font-bold rounded-lg hover:bg-indigo-700 transition-all shadow-md flex items-center gap-2">
+                            <span v-if="isGenerating"><i class="fa-solid fa-circle-notch fa-spin"></i> 處理中</span>
+                            <span v-else>確認下載</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
         </div>
 
         <!-- =======================
@@ -540,6 +606,14 @@
                             <a href="https://www.facebook.com/groups/1554372228718393" target="_blank" class="text-indigo-500 hover:text-indigo-700 font-bold hover:underline">萬物皆數</a>、
                             <a href="https://www.facebook.com/groups/108923286120994" target="_blank" class="text-indigo-500 hover:text-indigo-700 font-bold hover:underline">藝數摺學</a>
                         </p>
+                        <!-- Feedback Link -->
+                        <p class="mt-2 pt-2 border-t border-slate-200">
+                            如果您有任何建議或回饋，歡迎至 
+                            <a href="https://padlet.com/hccedu/padlet-5rkzrebd75t7al13" target="_blank" class="text-indigo-500 hover:text-indigo-700 font-bold hover:underline flex items-center gap-1 inline-flex">
+                                <i class="fa-regular fa-comments"></i> 意見回饋留言板
+                            </a> 留言。
+                            <br>若您留下姓名，我們將會把您加入致謝名單中！
+                        </p>
                     </div>
                 </div>
 
@@ -609,15 +683,19 @@
             const activePageId = ref(1);
             
             // Replaced single index with Set for multi-select
+            // For ordered batch fill, we need to track ORDER
             const selectedCellIndices = ref(new Set());
+            const isMultiSelectMode = ref(false); // Toggle for tablet friendly mode
             
             const inputBuffer = ref('');
+            const batchInputBuffer = ref(''); // For batch string input
             const selectedColor = ref('#1e293b');
             const selectedBgColor = ref('#ffffff');
             const isGenerating = ref(false);
             
             // Refs
             const textInputRef = ref(null);
+            const batchInputRef = ref(null);
             const fileInputRef = ref(null);
             const imageUploadInput = ref(null);
             const cropperImgRef = ref(null);
@@ -626,6 +704,11 @@
             const showGridModal = ref(false);
             const customGridConfig = ref({ rows: 10, cols: 10 });
 
+            // Export Modal State
+            const showExportModal = ref(false);
+            const exportName = ref('');
+            const exportProjectName = ref('');
+
             // Image Upload & Crop State
             const showCropper = ref(false);
             const tempImageSrc = ref('');
@@ -681,7 +764,7 @@
                     { id: 2, cells: createPageCells(totalCells, conf.rows, conf.cols) }
                 ];
                 
-                selectedCellIndices.value.clear();
+                clearSelection();
                 activePageId.value = 1;
                 viewMode.value = 'overview';
             };
@@ -716,7 +799,7 @@
                     { id: 2, cells: createPageCells(totalCells, r, c) }
                 ];
 
-                selectedCellIndices.value.clear();
+                clearSelection();
                 activePageId.value = 1;
                 viewMode.value = 'overview';
                 showGridModal.value = false;
@@ -739,8 +822,7 @@
                         { id: 2, cells: createPageCells(totalCells, rows, cols) }
                     ];
 
-                    selectedCellIndices.value.clear();
-                    inputBuffer.value = '';
+                    clearSelection();
                     alert("內容已清空！");
                 }
             };
@@ -832,6 +914,7 @@
                     cell.content = imgSrc;
                 });
                 inputBuffer.value = '';
+                batchInputBuffer.value = '';
             };
 
             const removeCustomImage = (idx) => {
@@ -884,7 +967,7 @@
                             customImages.value = importedData.customImages;
                         }
 
-                        selectedCellIndices.value.clear();
+                        clearSelection();
                         activePageId.value = 1;
                         viewMode.value = 'overview';
                         
@@ -944,7 +1027,7 @@
                         setCell(1, 8, 6, 'text', '海', 180);
                     }
 
-                    selectedCellIndices.value.clear();
+                    clearSelection();
                     activePageId.value = 1;
                     viewMode.value = 'overview';
                     
@@ -959,21 +1042,31 @@
             const switchToPage = (pageId) => {
                 activePageId.value = pageId;
                 viewMode.value = 'edit';
-                selectedCellIndices.value.clear();
+                clearSelection();
                 inputBuffer.value = '';
             };
 
-            // Enhanced Click Handler for Multi-select
+            // Enhanced Click Handler for Multi-select with Toggle Switch
+            const toggleMultiSelectMode = () => {
+                isMultiSelectMode.value = !isMultiSelectMode.value;
+                if (!isMultiSelectMode.value) {
+                    // When turning off, if multiple selected, keep them. 
+                    // Or we could clear. Keeping seems safer.
+                }
+            };
+
             const handleCellClick = (index, event) => {
-                // If Ctrl/Meta key is pressed, toggle selection
-                if (event && (event.ctrlKey || event.metaKey)) {
+                // Check if Ctrl key is pressed (override toggle) OR Toggle is ON
+                const isMultiSelect = (event && (event.ctrlKey || event.metaKey)) || isMultiSelectMode.value;
+
+                if (isMultiSelect) {
                     if (selectedCellIndices.value.has(index)) {
                         selectedCellIndices.value.delete(index);
                     } else {
                         selectedCellIndices.value.add(index);
                     }
                     
-                    // If we have single selection after toggle, setup buffer
+                    // Setup buffer logic similar to before
                     if (selectedCellIndices.value.size === 1) {
                         const idx = [...selectedCellIndices.value][0];
                         const cell = activePageCells.value[idx];
@@ -982,18 +1075,19 @@
                         selectedBgColor.value = cell.bgColor;
                         nextTick(() => { if (textInputRef.value) textInputRef.value.focus(); });
                     } else {
-                        inputBuffer.value = ''; // Multi-select clears buffer to avoid confusion
+                        inputBuffer.value = ''; 
+                        batchInputBuffer.value = '';
                     }
                 } 
                 else {
-                    // Normal click without modifiers
+                    // Normal Single Click Mode
                     
-                    // If clicking an already selected cell when it is the ONLY selected cell -> Rotate
+                    // If clicking an already selected cell (single), Rotate it
                     if (selectedCellIndices.value.has(index) && selectedCellIndices.value.size === 1) {
                         rotateCurrentCell();
                     } 
                     else {
-                        // Otherwise, reset selection to just this one
+                        // Reset to single selection
                         selectedCellIndices.value.clear();
                         selectedCellIndices.value.add(index);
                         
@@ -1006,6 +1100,14 @@
                 }
             };
 
+            const clearSelection = () => {
+                selectedCellIndices.value.clear();
+                inputBuffer.value = '';
+                batchInputBuffer.value = '';
+                selectedColor.value = '#1e293b'; 
+                selectedBgColor.value = '#ffffff';
+            };
+
             const rotateCurrentCell = () => {
                 if (selectedCellIndices.value.size === 0) return;
                 selectedCellIndices.value.forEach(index => {
@@ -1014,6 +1116,7 @@
                 });
             };
 
+            // Single Cell Text Update
             const updateSelectedCellText = () => {
                 if (selectedCellIndices.value.size === 0) return;
                 selectedCellIndices.value.forEach(index => {
@@ -1024,6 +1127,34 @@
                 });
             };
 
+            // Batch Text Update (Sequential)
+            const applyBatchText = () => {
+                const text = batchInputBuffer.value;
+                if (!text || selectedCellIndices.value.size === 0) return;
+
+                // We need to respect the ORDER of selection.
+                // However, Set iteration order is insertion order in JS.
+                // So [...Set] preserves click order.
+                const indices = [...selectedCellIndices.value];
+                const chars = text.split(''); // Split string into chars. 
+                // Note: Complex emojis or surrogate pairs might need better splitting if advanced usage, 
+                // but for general text split('') is okay-ish, or use [...text] for better unicode support.
+                const charArray = [...text]; 
+
+                indices.forEach((cellIndex, i) => {
+                    if (i < charArray.length) {
+                        const cell = activePageCells.value[cellIndex];
+                        cell.type = 'text';
+                        cell.content = charArray[i];
+                        cell.color = selectedColor.value;
+                    }
+                });
+                
+                // Clear buffers after apply
+                batchInputBuffer.value = '';
+                inputBuffer.value = '';
+            };
+
             const applyIconToCell = (iconName) => {
                 if (selectedCellIndices.value.size === 0) return;
                 selectedCellIndices.value.forEach(index => {
@@ -1033,6 +1164,7 @@
                     cell.color = selectedColor.value;
                 });
                 inputBuffer.value = '';
+                batchInputBuffer.value = '';
             };
 
             const clearCurrentCell = () => {
@@ -1046,6 +1178,7 @@
                     cell.bgColor = '#ffffff'; // Reset BG
                 });
                 inputBuffer.value = '';
+                batchInputBuffer.value = '';
                 selectedColor.value = '#1e293b';
                 selectedBgColor.value = '#ffffff';
             };
@@ -1115,6 +1248,15 @@
             };
 
             // ... PDF Export Logic ...
+            const openExportModal = () => {
+                showExportModal.value = true;
+            };
+
+            const processExport = () => {
+                showExportModal.value = false;
+                exportPDF();
+            };
+
             const renderPageToCanvas = async (pageId) => {
                 const pageData = pages.value[pageId - 1];
                 const rows = currentGrid.value.rows;
@@ -1157,7 +1299,13 @@
                 });
                 gridHtml += `</div>`;
                 
-                gridHtml += `<div style="position: absolute; bottom: 5px; right: 10px; color: #e2e8f0; font-size: 10px; font-family: sans-serif;">Page ${pageId} - Magic Origami</div>`;
+                // --- Watermark Logic ---
+                if (exportName.value || exportProjectName.value) {
+                    const watermarkText = `${exportName.value ? exportName.value + '的' : ''}${exportProjectName.value || ''}`;
+                    if (watermarkText) {
+                        gridHtml += `<div style="position: absolute; bottom: 15mm; right: 15mm; color: #94a3b8; font-size: 12px; font-family: 'Noto Sans TC', sans-serif;">${watermarkText}</div>`;
+                    }
+                }
 
                 wrapper.innerHTML = gridHtml;
                 container.appendChild(wrapper);
@@ -1183,9 +1331,24 @@
             };
 
             const exportPDF = async () => {
-                if (selectedCellIndices.value.size > 0) selectedCellIndices.value.clear();
+                if (selectedCellIndices.value.size > 0) clearSelection();
                 isGenerating.value = true;
                 
+                // Determine filename
+                let fileName = 'magic-origami-booklet.pdf';
+                if (exportName.value || exportProjectName.value) {
+                    const namePart = exportName.value ? exportName.value : '';
+                    const projPart = exportProjectName.value ? exportProjectName.value : '';
+                    
+                    if (namePart && projPart) {
+                        fileName = `${namePart}的${projPart}.pdf`;
+                    } else if (namePart) {
+                        fileName = `${namePart}的作品.pdf`;
+                    } else if (projPart) {
+                        fileName = `${projPart}.pdf`;
+                    }
+                }
+
                 try {
                     const pdf = new jsPDF('p', 'mm', 'a4');
                     const pdfWidth = 210;
@@ -1200,7 +1363,7 @@
                     const imgData2 = canvas2.toDataURL('image/jpeg', 0.95);
                     pdf.addImage(imgData2, 'JPEG', 0, 0, pdfWidth, pdfHeight);
 
-                    pdf.save('magic-origami-booklet.pdf');
+                    pdf.save(fileName);
 
                 } catch (err) {
                     console.error(err);
@@ -1222,6 +1385,7 @@
                 activePageCells,
                 selectedCellIndices,
                 inputBuffer,
+                batchInputBuffer,
                 icons,
                 colors,
                 bgColors,
@@ -1230,11 +1394,13 @@
                 applyColor,
                 applyBgColor,
                 textInputRef,
+                batchInputRef,
                 isGenerating,
                 switchToPage,
                 handleCellClick,
                 rotateCurrentCell,
                 updateSelectedCellText,
+                applyBatchText,
                 applyIconToCell,
                 clearCurrentCell,
                 clearAllContent,
@@ -1262,7 +1428,17 @@
                 confirmCustomGrid,
                 isCustomGridActive,
                 getFontSizeClass,
-                getOverviewFontSizeClass
+                getOverviewFontSizeClass,
+                // Export Modal
+                showExportModal,
+                openExportModal,
+                processExport,
+                exportName,
+                exportProjectName,
+                // Multi-select
+                isMultiSelectMode,
+                toggleMultiSelectMode,
+                clearSelection
             };
         }
     }).mount('#app');