系列：一張投影片背後的工程：從零打造網頁簡報編輯器

對應程式版本：Git tag day-02

「做一個簡報工具」無法直接變成每天可以完成的工作。文字輸入、拖曳、保存與輸出彼此相連，如果只照介面區塊開發，很容易到最後才發現資料不能重開，或畫面能編輯卻不能列印。因此我先寫下最短使用流程，再用可觀察的結果切成里程碑。

上一篇先界定了第一版範圍。這一篇要把範圍變成可以逐步交付、逐步驗收的工作，而不是列出一張很長的功能清單。

先寫一條完整使用流程

第一位使用者要製作一份含圖表的研究分享簡報。最短流程是：建立兩張投影片，加入中文與圖片，調整位置，重新整理後繼續編輯，最後輸出成兩頁 PDF。

這條流程提供了一個很實用的判斷方式：每項工作完成後，使用者是否比昨天更接近完成這份簡報？如果答案是否定的，工作可能切得太偏向內部實作，或還缺少可觀察的結果。

用完成條件切里程碑

我把第一版分成六個可以獨立驗收的階段：

這樣拆分後，「完成保存功能」不再只是呼叫一次資料庫 API，而是要看到儲存狀態、重新整理，並確認文字、圖片與座標都回來。「完成 PDF」也不是出現一顆按鈕，而是列印前要等字型與圖片解碼，預覽頁數必須等於投影片數。

每一階段也有明確的縮小方式。如果開發時間不足，可以先拿掉裝飾樣式和額外快捷鍵，卻不能刪除驗收流程需要的文字、圖片、保存或輸出。這讓範圍調整有依據，不會只挑容易展示的部分完成。

先處理會推翻設計的風險

排完工作後，我沒有從工具列或漂亮的縮圖開始，而是先驗證三個可能推翻架構的問題。

第一是中文輸入法。組字期間的 Backspace 與 Delete 是文字操作，不能交給畫布刪除物件。第二是圖片保存。文件只記錄 assetId，Blob 獨立存在 IndexedDB，避免把大型資料塞進 JSON。第三是 PDF。編輯畫面與列印都使用同一個投影片渲染元件，避免兩套版面逐漸產生差異。

前兩項已在 Edge 完成手動驗收。重新整理還原、不同縮放比例拖曳，以及中文輸入法按鍵處理都通過。第三項先用 npm run validate:edge 建立兩張含中文與圖片的投影片，確認列印文件與輸出 PDF 都有兩頁；再從 Edge 列印對話框選擇「另存新檔為 PDF」，人工確認總頁數、橫向版面、中文與圖片。

Edge 顯示總計兩頁，目的地為「另存新檔為 PDF」，邊界設為「無」；兩頁中文與圖片均完整呈現。

每一段都留下證據

我為每項工作使用同一組完成條件：功能能從介面操作、核心狀態有自動測試、指定瀏覽器跑過關鍵流程，而且限制已記錄。連續操作適合保存步驟和結果，靜態版面則用截圖呈現。

目前 npm test 為 6 個測試檔、24 個案例通過，npm run lint 與 npm run build 也通過。Edge 驗收腳本還會實際執行投影片複製、排序、刪除、自動保存及 PDF 產生，避免測試只重複程式內部的實作方式。

這份拆分不是固定不變的排程。之後若發現復原紀錄、圖片記憶體或匯入檔案比預期困難，我會先縮小該階段，再保留相同的使用流程與驗收證據。

下一篇會把注意力移到文件模型：投影片、文字、圖片與資產參照各需要哪些欄位，以及哪些介面狀態不應被保存。

參考資料

• React：Choosing the State Structure
• MDN：IndexedDB API
• MDN：Printing