Web SDK

UI 概覽

架構

Univer 的 UI 基座基於下圖設計：

DesktopWorkbench BuiltInUIPart slotsIUIPartsService.registerComponent(part, factory)
workbench-layout
BuiltInUIPart.CUSTOM_HEADERCustom Header
BuiltInUIPart.TOOLBARToolbar+ HEADER_MENU
BuiltInUIPart.LEFT_SIDEBARLeft Sidebar
BuiltInUIPart.HEADERHeader
BuiltInUIPart.CONTENTContent
internal Sidebar serviceRight Sidebar
BuiltInUIPart.FOOTERFooter
outside workbench-layout
BuiltInUIPart.GLOBALGlobal
BuiltInUIPart.FLOATINGFloating Portal

透過不同的插件相結合，向基座中添加各種功能和視圖，最終形成一個完整的應用。

設計系統

Univer 的設計系統基於 Tailwind CSS 建構了一系列的設計 Tokens，這些 Tokens 會被渲染引擎重複使用，以確保渲染引擎與視圖層的樣式一致。你可以透過修改這些 Tokens 來定制你的應用樣式，Tokens 被存儲在 @univerjs/themes 套件中。

自訂主題與深色模式

元件

Univer 使用了 React 元件來構建視圖層，因此對於同樣使用 React 的開發者而言，無論是使用 Univer 的元件還是註冊自訂元件，都會是一件非常簡單的事情。但這並不代表你只能使用 React 來自訂元件，Univer 也提供了對其他框架的支援，例如 Vue（3.x 版本）和 Web Components。

所有的基礎元件都被存放在 @univerjs/design 套件中。圖示元件則存放在 @univerjs/icons 套件中。這些元件也可以獨立於 Univer 單獨使用。

自訂元件常用於以下場景：

  • 在 Ribbon / Context Menu 中添加自訂按鈕
  • 在 Sidebar / Popup 等元件中整合自訂元件
  • 替換內建元件

我們會在後續章節中詳細介紹如何註冊和使用自訂元件。

自訂元件圖示

選單順序與網格佈局

透過 order、gridLayout 和 updateMenuConfig() 設定頁籤、群組及選單項目的順序、網格位置與執行階段更新；指南也提供自訂選單 Facade 設定的入口。

你覺得這篇文檔如何？

© 2026 DreamNum Co., Ltd.