ObjectOS
構建介面

頁面

由區域、元件與本地狀態組合的自由佈局 —— 外加隨包釋出的 Markdown 文件頁。

**頁面是一個自由容器。**不同於繫結到單個物件的檢視,頁面組合多個元件、嵌入檢視並管理本地狀態 —— 你的主屏、自定義記錄佈局和工具面板都靠它。

const homePage = {
  name: 'sales_home',
  label: 'Sales Home',
  type: 'home',
  regions: [
    { name: 'header', width: 'full', components: [
      { type: 'metric_card', id: 'total_revenue', label: 'Total Revenue',
        properties: { dataset: 'sales', values: ['revenue'], format: 'currency' } },
    ]},
    { name: 'main', width: 'large', components: [
      { type: 'list_view', id: 'recent_deals', label: 'Recent Deals',
        properties: { object: 'opportunity', view: 'recent_open', limit: 10 } },
    ]},
  ],
}

頁面屬性

屬性型別必填說明
namestring機器名(snake_case
labelstring顯示標籤
typeenum頁面型別(預設 'record',見下)
objectstring關聯物件(record 型別用)
templatestring佈局模板名(預設 'default'
regionsPageRegion[]承載元件的佈局區域
variablesPageVariable[]本地狀態變數
isDefaultboolean是否為該型別的預設頁面
assignedProfilesstring[]可訪問此頁面的簡檔

頁面型別

型別用於
record繫結到某個物件記錄的自定義詳情頁
home應用著陸 / 入口
app通用應用佈局
utility工具、設定、嚮導
list資料驅動的介面

只有這五種型別有效 —— 早期路線圖上那些從未交付渲染器的型別已從 Schema 中移除。

區域

區域是佈局分割槽;每個區域承載元件:

regions: [
  { name: 'sidebar', width: 'small', components: [/* … */] },
  { name: 'content', width: 'large', components: [/* … */] },
]

width 接受 'small''medium''large''full'

元件

元件是區域內部的積木:

{
  type: 'chart',
  id: 'revenue_chart',
  label: 'Revenue Trend',
  properties: { chartType: 'line', dataset: 'sales',
                dimensions: ['close_month'], values: ['revenue'] },
  events: { onClick: "navigate_to('opportunity_detail', { id: $event.id })" },
  visibility: "os.user.profile == 'sales_manager'",
}

承載分析資料的元件(chartmetric_card)繫結一個具名資料集,並按名稱選用其 dimensions + values —— 與儀表盤元件相同的 ADR-0021 形態,也是 Studio 唯一會生成的形態。已移除的內聯分析形態(在元件上直接寫 object + categoryField + valueField + aggregate)自 16.0 起是解析錯誤,而不再是被悄悄忽略的空操作。

屬性型別說明
typestring標準組件型別,或自定義字串
idstring唯一的元件例項 id
propertiesobject元件專屬配置
eventsobject事件處理器(操作表示式)
visibilitystringCEL 可見性謂詞
style / className臨時 CSS
responsiveStylesobject首選樣式通道:桌面優先、按斷點的樣式對映(large 為基礎,再疊加 medium / small / xsmall 覆蓋),編譯為作用域 CSS —— 優先用 var(--space-8) 這樣的設計令牌

標準的、帶名稱空間的元件型別:

名稱空間型別
結構page:headerpage:footerpage:sidebarpage:tabspage:accordionpage:cardpage:section
記錄上下文record:detailsrecord:highlightsrecord:related_listrecord:activityrecord:chatterrecord:pathrecord:alertrecord:quick_actionsrecord:reference_railrecord:history
導航app:launchernav:menunav:breadcrumb
工具global:searchglobal:notificationsuser:profile
AIai:chat_windowai:suggestion
元素element:textelement:numberelement:imageelement:dividerelement:buttonelement:filterelement:formelement:record_pickerelement:text_input

元件還可以攜帶 dataSource(多物件頁面中按元素繫結物件)、responsivearia 配置。專案專屬的元件可以使用自定義字串型別。

變數

頁面持有跨元件共享的本地狀態:

variables: [
  { name: 'selected_tab', type: 'string', defaultValue: 'overview' },
  { name: 'date_range',   type: 'object', defaultValue: { start: null, end: null } },
]

type 接受 'string'(預設)、'number''boolean''object''array''record_id'

record 型別的頁面是定製記錄佈局的受支援路徑 —— 當由角色派生的詳情頁(見表單)不夠用時就用它。把 record:highlights 組合進全寬頭部,把 record:detailsrecord:activity 放進側欄,把 record:related_list 元件放進主區域。

通過 page 導航入口把頁面掛到應用上,或者用 homePageId 把它設為應用的著陸頁。

文件頁

doc 是一頁包文件:放在扁平的 src/docs/ 目錄裡的純 Markdown 檔案,編譯進包產物,在 Console 中渲染於 /docs/<name>。文件還會在 AI 助手回答關於你的包的問題時充當依據。

src/docs/
  crm_index.md            → 文档名 "crm_index"
  crm_user_guide.md       → 文档名 "crm_user_guide"

檔名主幹就是文件 name —— 沒有目錄分級,沒有排序檔案。扁平佈局讓交叉引用保持穩定:連結按 basename 解析,從不按路徑。

規則細節
命名snake_case,且構建 lint 要求名稱空間字首crm_user_guide,而非 user_guide
Frontmatter可選;讀取 titledescription。標題解析順序:frontmatter → 第一個 # 標題 → 文件名
交叉引用普通相對連結([overview](./crm_index.md))—— 在 Console 裡重寫為 /docs/<target>,在 GitHub 上原生可用。同包內的壞鏈會導致構建失敗
MarkdownCommonMark + GFM:表格、帶高亮的圍欄程式碼、標題錨點、GitHub alerts(> [!TIP]
構建時拒絕MDX / 內嵌元件(文件是資料,不是程式碼 —— 這是信任邊界)以及圖片引用(尚無資產服務;快速失敗勝過碎圖)

文件解析按包隔離:兩個已安裝的包可以各自發布同名裸文件並共存 —— 誰也不會覆蓋誰。

需要動態內容 —— 即時流程圖、記錄表格 —— 時別試圖內嵌元件。用 URL 連結到後設資料;平臺渲染即時檢視,文件只負責指向它。

下一步

頁面原因
應用把頁面放進導航、設定 homePageId
檢視頁面所嵌入的物件介面
表單角色派生的記錄佈局 vs 自定義記錄頁
儀表盤以分析為中心的佈局,而非自由佈局
操作element:button 的目標與 modal 型別操作
AI Builder用對話生成頁面後設資料

On this page