Day 01｜我要做一個什麼樣的簡報工具

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

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

我想做的不是另一個功能完整的 PowerPoint，而是一個能在瀏覽器裡完成研究分享簡報的編輯器。使用者可以加入文字與圖片、調整位置，關掉頁面後繼續編輯，最後播放或輸出成 PDF。

這個題目的重點，是一張看似簡單的投影片背後其實包含文件模型、座標轉換、輸入法事件、操作歷史、檔案保存與列印排版。接下來 30 天，我會逐一拆開這些問題，保留實作選擇、失敗案例與測試證據。

目前原型：左側是內容縮圖，中間是固定 16:9 畫布，右側顯示選取狀態。

第一位使用者要完成什麼

第一個情境是製作一份含文字與圖片的研究分享簡報。最短的完整流程是：建立投影片、放入內容、調整版面、保存、重新開啟、播放，最後輸出 PDF。第一版先服務桌面版 Chrome 與 Edge，畫布固定為 16:9。

第一版的邊界

這些限制不是只寫在需求表上。當功能延誤時，我會先拿掉裝飾樣式和額外快捷鍵，保留文字、圖片、基本操作、保存及輸出，確保最後仍有一條完整可展示的流程。

先做最危險的部分

正式連載前，我先驗證三件容易拖垮進度的事：中文輸入法組字不能誤觸快捷鍵；圖片 Blob 寫入 IndexedDB 後能重新讀取；兩頁投影片能正確列印成 PDF。

目前原型已能新增及拖曳中文文字框，也能匯入 PNG/JPEG。文件只保存圖片的 assetId，實際 Blob 放在獨立資產儲存區。只有 IndexedDB 交易完成後，介面才顯示「已儲存在這台裝置」。這讓文件資料維持精簡，也替之後的復原紀錄保留空間。

目前可重現的驗證結果如下：

• npm test：6 個測試檔、24 個案例通過，包含中文組字保護、縮放座標、IndexedDB 圖文往返、投影片管理與列印準備流程。
• npm run lint：通過。
• npm run build：TypeScript 與 Vite production build 通過。
• 2026-09-11 使用 Edge 手動驗證：重新整理還原、不同縮放比例拖曳、中文輸入法組字期間的按鍵處理皆通過。
• npm run validate:edge：在 Edge 建立、複製、排序與刪除投影片後成功自動儲存，並產生含中文及圖片的兩頁 PDF。

什麼叫做完成

最後會用固定的 10 張投影片測試資料，跑完編輯、保存、重開、播放與輸出。中文輸入、三種縮放比例的拖曳、20 次混合操作的復原重做、損壞檔案保護及 PDF 頁數都要留下紀錄，並邀請 2 至 3 位使用者完成指定任務。

下一篇會把這個範圍拆成能逐步驗收的工作，說明為什麼先做高風險原型，以及每個里程碑要留下什麼證據。

參考資料

• React：Managing State
• MDN：IndexedDB API
• MDN：Printing