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

收尾版本：2026-10-04 工作目錄，package.json 版本 0.20.0。工作目錄包含尚未提交的功能與本次修正，不以 HEAD 或不存在的 Git tag 代表完整成果。

專案一開始有兩條主線：做出可以操作、展示的網頁簡報編輯器，以及把設計、實作與驗證整理成三十篇文章。今天把它們放在同一份成果裡：用示範簡報的畫面、操作流程與驗證結果，讓讀者看到目前做到哪裡。

我準備了一份三頁的研究分享 Demo。它包含中文、合成圖表、講者備註與略過的補充頁，可以在編輯器播放，也有對應的兩頁 PDF。

用一條短流程介紹作品

如果現場介紹這份作品，我會依下列順序操作；文章裡先把每一步要展示的結果列清楚：

這是一份展示腳本，不代表上表每一步都在本次截圖時執行過。已實際記錄的編輯、播放與 PDF 畫面分別放在 Day 25、Day 26 及本文；批次格式與圖層的操作證據則在 Day 27、Day 28。

目前沒有公開的 Demo 網址或原始碼連結，讀者還無法直接開啟編輯器試用。這篇以文章中的畫面與數據說明成果，公開試用入口要等實際上線後才能補上。

這次實際完成的示範

這份合成簡報有三張投影片：第一張是中文標題與圖表，第二張整理交付方式，第三張是標記略過的補充資料。上方截圖顯示編輯器中保留三頁；Day 25 的播放畫面顯示第二張與頁碼 2 / 2；Day 26 的列印畫面則呈現第一張。

取證時產生了可匯入的三頁備份及兩頁 PDF。備份通過專案的匯入解析器檢查，包含一筆 PNG 資產；列印檢查確認中文與圖片已準備好，略過頁和講者備註沒有進入輸出。這些是本次確實完成的結果。

示範備份、PDF 和量測原始資料目前都只在本機保存，文章沒有提供可下載的附件。因此這裡呈現操作畫面與檢查結果，不請讀者到未公開的專案路徑尋找檔案。

這三十篇累積了什麼

前段建立文件模型、邏輯座標與文字圖片互動；中段加入多選、群組、吸附、排列、圖層順序與圖片處理，再把復原、本機保存和備份接起來。

後段則轉向使用成果：播放控制、PDF 交付、批次格式、格式刷、圖層面板，以及對歷史成本的實際量測。工程設計的價值，在這些操作連續使用時比較容易看清楚。

例如，文字格式只改樣式、不改內容與位置，讓格式刷不會破壞排版；隱藏物件保留資產引用，讓恢復顯示不會缺圖；輸出共用頁面篩選，讓播放與 PDF 一起略過補充頁。

留下結果，也留下測試的界線

本次收尾執行的檢查如下：

格式刷、圖層、清單以及完整編輯／備份流程的 Edge 證據沿用 2026-10-02 的 V20 紀錄。本次新增腳本聚焦文章示範與量測，沒有把它當作完整舊腳本的重跑。

這輪也真的抓到一個問題：系統要求減少動態效果時，轉場仍因 CSS 權重繼續播放。修正後重新以 Edge 檢查淡入與滑入，才把結果寫進 Day 25。這比只列出通過的項目，更能說明驗證為什麼需要走到真實瀏覽器。

效能結果則保留另一種結論：連續輸入合併減少了歷史保留量，但目前數據不足以宣稱整個編輯器更流暢。量測範圍與限制跟著結果一起留下，下一次才知道要補哪一段。

還有哪些事情沒有完成

目前作品適合本機、單人製作與展示，距離完整簡報軟體還有明確缺口：

• 文字格式以整個文字框為單位，清單只有單層，尚無表格。
• 可設定背景與快速版型，尚未有完整主題、母片與模板管理。
• 目前主要編輯一份本機簡報，尚無多份簡報庫、雲端同步或協作。
• 使用自訂備份格式與 PDF，尚未支援 PPTX 匯入、匯出。
• 尚無講者獨立視窗，也未完成大型圖片負載和長時間操作的全面驗收。

下一階段沿既有開發順序，先做表格，再處理主題模板與多份簡報管理。每項都需要自己的文件模型、操作與備份驗證，不能只在工具列加一個按鈕就算完成。

對下一次連載的調整

回頭看這次寫作，有些概念拆得太細，座標換算、文件與圖片分離等背景重複出現，文章也曾長時間停在拆解同一版程式。它們各有技術內容，但讀者不一定能感受到功能持續增加。

下一次我會先替每篇寫一句「讀完後能多完成什麼」，再決定程式碼與背景需要多少篇幅。已解釋過的原則用前文銜接，把空間留給新的問題、實際失敗，以及修正後的結果。

這次留下的作品，能讓我從一份簡報的操作畫面，往下談資料、互動、保存與測試；三十篇文章則記錄了這些選擇的理由。之後每加入一項功能，都可以沿著這套方式繼續累積。