open-press

Runtime

Slides 架構

簡報 Press 的結構：Press marker、每張投影片各自的 source、theme CSS、core objects 與穩定的 object identity。

OpenPress 把 deck 順序、每張投影片的原始碼、簡報內共用的 UI 與 theme CSS 分開管理。投影片可直接編輯，同時保有整份簡報一致的視覺系統。

press.tsx 只描述順序

press/<slug>/press.tsx 是 deck 的索引。它用 <Slide id="..." /> 註冊播放順序；每張投影片的實際構成放在各自的原始碼檔。

import { Press, Slide } from "@open-press/core";

export default function SlidePress() {
  return (
    <Press slug="slide" title="Deck Title" type="slides" page="slide-16-9">
      <Slide id="cover" />
      <Slide id="agenda" />
    </Press>
  );
}

每張投影片都有獨立原始碼

每張投影片位於 press/<slug>/slides/<id>/slide.tsx。這個檔案就是畫面的原始碼，通常由 Slide、Frame、Text、Line、MediaObject 等 core objects 組成。

每張投影片一個資料夾，帶來幾個實際好處：

  1. 作者與 Agent 可以只修改一張投影片，不必動到整份簡報。
  2. Git diff 與版本紀錄更容易閱讀。
  3. Workbench 的新增、刪除與跳過操作，都能對應到明確的原始碼資料夾。

新投影片從空白原始碼開始

open-press slide add <id> --press <slug> 會建立最小的投影片原始碼，並註冊該 ID。接著直接編輯這個檔案，完成實際的投影片構成。

只用一次的視覺處理留在該投影片裡；只有確定無內容的視覺元件已有第二個實際使用點，才抽到 press/<slug>/ui/ 或 press/<slug>/components/。整份簡報共用的字體、色彩、間距與效果則放在 press/<slug>/theme/default.css。

Object identity 由 primitives 表達

可編輯物件不應藏在大型 compound wrapper 的 props 裡。請直接用 core objects 組成原始碼：

  • Frame 用 frameKey 作為 identity。
  • Text、Line 與 MediaObject 使用穩定的 label。
  • 固定位置使用 box；16:9 投影片的基準畫布為 1920 x 1080。
  • 彈性排列使用 Frame layout。
  • 字體、色彩、間距與特殊效果放在 theme CSS。

引擎會從這些 primitives 產生完整 locator，供 Workbench 的 inline editing、comments、thumbnail 與 preview 使用。作者與 Agent 要提供穩定的局部 ID 與清楚的原始碼結構。

更多細節請參考 Core Object API。