Update index.html

index.html

@@ -21,6 +21,9 @@
     <!-- Cropper.js for Image Cropping -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
+    
+    <!-- IndexedDB Wrapper (idb-keyval) -->
+    <script src="https://cdn.jsdelivr.net/npm/idb-keyval@6/dist/iife/index.js"></script>
 
     <!-- FontAwesome 6 (For Consistent Icons) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -115,16 +118,36 @@
         <div class="w-full md:w-1/3 lg:w-1/4 bg-white border-r border-slate-200 flex flex-col h-full shadow-lg z-20 relative">
             
             <!-- Header -->
-            <div class="p-6 border-b border-slate-100 bg-slate-50">
-                <div class="flex justify-between items-center mb-2">
+            <div class="p-6 border-b border-slate-100 bg-slate-50 relative">
+                <div class="flex justify-between items-center mb-4">
                     <h1 class="text-2xl font-bold text-indigo-600 flex items-center gap-2">
                         <span class="text-3xl">🎩</span>
                         摺紙魔術設計師
                     </h1>
                 </div>
+
+                <!-- History Controls (Undo/Redo) -->
+                <div class="flex gap-2 mb-4">
+                    <button 
+                        @click="undo" 
+                        :disabled="historyIndex <= 0"
+                        class="flex-1 py-2 bg-white border border-slate-300 rounded-lg text-slate-700 font-bold text-sm hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2 shadow-sm"
+                        title="復原 (Ctrl+Z)"
+                    >
+                        <i class="fa-solid fa-rotate-left"></i> 復原
+                    </button>
+                    <button 
+                        @click="redo" 
+                        :disabled="historyIndex >= history.length - 1"
+                        class="flex-1 py-2 bg-white border border-slate-300 rounded-lg text-slate-700 font-bold text-sm hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2 shadow-sm"
+                        title="重做 (Ctrl+Y)"
+                    >
+                        <i class="fa-solid fa-rotate-right"></i> 重做
+                    </button>
+                </div>
                 
                 <!-- Page Navigator -->
-                <div class="mt-4 flex bg-slate-200 p-1 rounded-lg">
+                <div class="flex bg-slate-200 p-1 rounded-lg">
                     <button 
                         @click="viewMode = 'overview'"
                         class="flex-1 py-1 text-sm font-bold rounded-md transition-all"
@@ -351,6 +374,7 @@
                             type="text" 
                             v-model="inputBuffer" 
                             @input="updateSelectedCellText"
+                            @blur="saveHistory"
                             placeholder="先點選右側格子..."
                             maxlength="3"
                             :disabled="selectedCellIndices.size === 0"
@@ -712,8 +736,15 @@
     </div>
 
     <script>
-    const { createApp, ref, computed, nextTick, onMounted, watch } = Vue;
+    const { createApp, ref, computed, nextTick, onMounted, onUnmounted, watch } = Vue;
     const { jsPDF } = window.jspdf;
+    
+    // Check if idbKeyval is loaded
+    const db = window.idbKeyval || {
+        get: async () => null,
+        set: async () => {},
+        del: async () => {}
+    };
 
     createApp({
         setup() {
@@ -825,6 +856,80 @@
                 return activePageCells.value[idx].imageScale || 'fit';
             });
 
+            // --- History System (Undo/Redo) ---
+            const history = ref([]);
+            const historyIndex = ref(-1);
+            const MAX_HISTORY = 30;
+            const isUndoing = ref(false); // Flag to prevent auto-save logic during undo
+
+            const saveHistory = () => {
+                if (isUndoing.value) return;
+
+                // Remove any future states (redo branch)
+                if (historyIndex.value < history.value.length - 1) {
+                    history.value = history.value.slice(0, historyIndex.value + 1);
+                }
+
+                // Create deep copy snapshot
+                const snapshot = JSON.parse(JSON.stringify({
+                    grid: currentGrid.value,
+                    pages: pages.value,
+                    customImages: customImages.value
+                }));
+
+                history.value.push(snapshot);
+                historyIndex.value++;
+
+                // Limit history size
+                if (history.value.length > MAX_HISTORY) {
+                    history.value.shift();
+                    historyIndex.value--;
+                }
+            };
+
+            const undo = () => {
+                if (historyIndex.value > 0) {
+                    isUndoing.value = true;
+                    historyIndex.value--;
+                    loadSnapshot(history.value[historyIndex.value]);
+                    // Wait for Vue reactivity to update before allowing saves
+                    nextTick(() => { isUndoing.value = false; });
+                }
+            };
+
+            const redo = () => {
+                if (historyIndex.value < history.value.length - 1) {
+                    isUndoing.value = true;
+                    historyIndex.value++;
+                    loadSnapshot(history.value[historyIndex.value]);
+                    nextTick(() => { isUndoing.value = false; });
+                }
+            };
+
+            const loadSnapshot = (snapshot) => {
+                currentGrid.value = snapshot.grid;
+                pages.value = snapshot.pages;
+                customImages.value = snapshot.customImages;
+                // We keep selection if possible, or clear it. 
+                // Clearing is safer to avoid selecting invalid indices if grid changed.
+                // But if grid is same, maybe keep? Let's simply clear for robustness.
+                clearSelection();
+            };
+
+            const handleKeyboardShortcuts = (e) => {
+                if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+                    e.preventDefault();
+                    if (e.shiftKey) {
+                        redo();
+                    } else {
+                        undo();
+                    }
+                } else if ((e.ctrlKey || e.metaKey) && e.key === 'y') {
+                    e.preventDefault();
+                    redo();
+                }
+            };
+
             // --- Auto-Save Key ---
             const AUTOSAVE_KEY = 'magic_origami_autosave_v1';
 
@@ -886,6 +991,8 @@
                 clearSelection();
                 activePageId.value = 1;
                 viewMode.value = 'overview';
+                
+                saveHistory(); // HISTORY
             };
 
             // Custom Grid Logic
@@ -922,6 +1029,8 @@
                 activePageId.value = 1;
                 viewMode.value = 'overview';
                 showGridModal.value = false;
+                
+                saveHistory(); // HISTORY
             };
 
             const clearAllContent = () => {
@@ -942,6 +1051,7 @@
                     ];
 
                     clearSelection();
+                    saveHistory(); // HISTORY
                     alert("內容已清空！");
                 }
             };
@@ -965,6 +1075,7 @@
                 selectedCellIndices.value.forEach(index => {
                     activePageCells.value[index].color = color;
                 });
+                saveHistory(); // HISTORY
             };
 
             const applyBgColor = (bgColor) => {
@@ -972,6 +1083,7 @@
                 selectedCellIndices.value.forEach(index => {
                     activePageCells.value[index].bgColor = bgColor;
                 });
+                saveHistory(); // HISTORY
             };
 
             const toggleImageScale = () => {
@@ -979,6 +1091,7 @@
                 selectedCellIndices.value.forEach(index => {
                     activePageCells.value[index].imageScale = newScale;
                 });
+                saveHistory(); // HISTORY
             };
 
             // --- Image Upload Logic ---
@@ -1114,6 +1227,7 @@
                     applyCustomImageToCell(base64);
                 }
                 
+                saveHistory(); // HISTORY (New image added or applied)
                 cancelCrop();
             };
 
@@ -1129,11 +1243,13 @@
                 });
                 inputBuffer.value = '';
                 batchInputBuffer.value = '';
+                saveHistory(); // HISTORY
             };
 
             const removeCustomImage = (idx) => {
                 if(confirm('確定要移除這張自定義圖片嗎？')) {
                     customImages.value.splice(idx, 1);
+                    saveHistory(); // HISTORY
                 }
             };
 
@@ -1185,6 +1301,7 @@
                         activePageId.value = 1;
                         viewMode.value = 'overview';
                         
+                        saveHistory(); // HISTORY
                         alert("專案匯入成功！");
                     } catch (err) {
                         console.error(err);
@@ -1329,6 +1446,7 @@
                     activePageId.value = 1;
                     viewMode.value = 'overview';
                     
+                    saveHistory(); // HISTORY
                     alert("模板套用成功！");
 
                 } catch (e) {
@@ -1412,6 +1530,7 @@
                     const cell = activePageCells.value[index];
                     cell.rotation = (cell.rotation + 90) % 360;
                 });
+                saveHistory(); // HISTORY
             };
 
             // Single Cell Text Update
@@ -1448,6 +1567,8 @@
                 // Clear buffers after apply
                 batchInputBuffer.value = '';
                 inputBuffer.value = '';
+                
+                saveHistory(); // HISTORY
             };
 
             const applyIconToCell = (iconName) => {
@@ -1460,6 +1581,8 @@
                 });
                 inputBuffer.value = '';
                 batchInputBuffer.value = '';
+                
+                saveHistory(); // HISTORY
             };
 
             const clearCurrentCell = () => {
@@ -1476,16 +1599,33 @@
                 batchInputBuffer.value = '';
                 selectedColor.value = '#1e293b';
                 selectedBgColor.value = '#ffffff';
+                
+                saveHistory(); // HISTORY
             };
 
             // --- Auto Save & Init ---
 
-            onMounted(() => {
-                // 1. Auto-save restoration check
-                const savedData = localStorage.getItem(AUTOSAVE_KEY);
-                if (savedData) {
-                    try {
-                        const parsed = JSON.parse(savedData);
+            onMounted(async () => {
+                // Register Keyboard Listeners
+                window.addEventListener('keydown', handleKeyboardShortcuts);
+
+                // 1. Auto-save restoration check (IndexedDB)
+                try {
+                    const savedData = await db.get(AUTOSAVE_KEY);
+                    
+                    // If no IndexedDB data, fallback check localStorage (Migration)
+                    let parsed = savedData;
+                    if (!parsed) {
+                        const lsData = localStorage.getItem(AUTOSAVE_KEY);
+                        if (lsData) {
+                            try {
+                                parsed = JSON.parse(lsData);
+                                console.log("Migrating from LocalStorage to IndexedDB...");
+                            } catch(e) {}
+                        }
+                    }
+
+                    if (parsed) {
                         const hasContent = parsed.pages.some(p => p.cells.some(c => c.content !== ''));
                         
                         if (hasContent) {
@@ -1496,21 +1636,37 @@
                                 customImages.value = parsed.customImages || [];
                             }
                         }
-                    } catch (e) {
-                        console.error("Auto-save parse error", e);
                     }
+                    
+                    // Initialize History after load
+                    saveHistory();
+
+                } catch (e) {
+                    console.error("Auto-save load error", e);
                 }
 
-                // 2. Auto-save Watcher
-                watch([currentGrid, pages, customImages], () => {
-                    const dataToSave = {
+                // 2. Auto-save Watcher (IndexedDB)
+                watch([currentGrid, pages, customImages], async () => {
+                    // Do not save if we are currently undoing/redoing to prevent race conditions or unnecessary writes
+                    if (isUndoing.value) return;
+
+                    const dataToSave = JSON.parse(JSON.stringify({
                         grid: currentGrid.value,
                         pages: pages.value,
                         customImages: customImages.value
-                    };
-                    localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(dataToSave));
+                    }));
+                    
+                    try {
+                        await db.set(AUTOSAVE_KEY, dataToSave);
+                    } catch (e) {
+                        console.error("IndexedDB Save Error", e);
+                    }
                 }, { deep: true });
             });
+            
+            onUnmounted(() => {
+                window.removeEventListener('keydown', handleKeyboardShortcuts);
+            });
 
             // Helper to replace text element with SVG for perfect centering
             const replaceWithSvgText = (el, content, color, fontFamily, fontWeight, fontSize) => {
@@ -1917,7 +2073,13 @@
                 selectedIndicesArray,
                 // Puzzle
                 toggleImageScale,
-                currentImageScale
+                currentImageScale,
+                // History
+                undo,
+                redo,
+                saveHistory,
+                historyIndex,
+                history
             };
         }
     }).mount('#app');