UI 概览

架构

Univer 的 UI 基座基于下图设计：

通过不同的插件相结合，向基座中添加各种功能和视图，最终形成一个完整的应用。

设计系统

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 等组件中集成自定义组件
• 替换内置组件

我们会在后续章节中详细介绍如何注册和使用自定义组件。