# UI 概覽

- Human documentation: [https://docs.univer.ai/zh-TW/guides/sheets/ui/overview](https://docs.univer.ai/zh-TW/guides/sheets/ui/overview)

- Agent Markdown: [https://docs.univer.ai/zh-TW/guides/sheets/ui/overview.md](https://docs.univer.ai/zh-TW/guides/sheets/ui/overview.md)

- Requested language: `zh-TW`

- Content language: `zh-TW`

- Documentation version: `1.2.0`

- Source: [sheets/ui/overview.zh-TW.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/sheets/ui/overview.zh-TW.mdx)

---

## 架構

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



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

## 設計系統

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

- [自訂主題與深色模式](https://docs.univer.ai/zh-TW/guides/fundamentals/ui/themes.md)

## 元件

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

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

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

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

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

- [自訂元件](https://docs.univer.ai/zh-TW/guides/sheets/ui/components.md)

- [圖示](https://docs.univer.ai/zh-TW/guides/icons.md)

## 選單順序與網格佈局

透過 [`order`、`gridLayout` 和 `updateMenuConfig()`](https://docs.univer.ai/zh-TW/guides/sheets/features/core.md#menu-order-and-grid-layout) 設定頁籤、群組及選單項目的順序、網格位置與執行階段更新；指南也提供自訂選單 Facade 設定的入口。