UI Descripción general

Arquitectura

La base de la interfaz de usuario de Univer está diseñada en base al siguiente diagrama:

Al combinar diferentes complementos, se agregan varias funcionalidades y vistas a la base, formando en última instancia una aplicación completa.

Sistema de diseño

El sistema de diseño de Univer está construido en Tailwind CSS, creando una serie de tokens de diseño que son reutilizados por el motor de renderizado para garantizar un estilo consistente entre el motor de renderizado y la capa de vista. Puede personalizar los estilos de su aplicación modificando estos tokens, que se almacenan en el paquete @univerjs/themes.

Componentes

Univer usa componentes de React para construir la capa de vista, lo que hace que sea muy fácil para los desarrolladores que también usan React usar los componentes de Univer o registrar componentes personalizados. Sin embargo, esto no significa que sólo puedas usar React para crear componentes personalizados; Univer también admite otros marcos, como Vue (versión 3.x) y componentes web.

Todos los componentes básicos se almacenan en el paquete @univerjs/design y los componentes de íconos se almacenan en el paquete @univerjs/icons. Estos componentes también se pueden usar independientemente de Univer.

Los componentes personalizados se usan a menudo en los siguientes escenarios:

• Agregar botones personalizados en la cinta/menú contextual
• Integrar componentes personalizados en la barra lateral/emergente, etc.
• Reemplazar componentes integrados

Proporcionaremos instrucciones detalladas sobre cómo registrar y usar componentes personalizados en los siguientes capítulos.

Orden de menús y disposición en cuadrícula

Utiliza order, gridLayout y updateMenuConfig() para configurar el orden de pestañas, grupos y elementos, la posición en la cuadrícula y las actualizaciones en ejecución. La guía también enlaza las opciones Facade para menús personalizados.