61 lines
4.5 KiB
Markdown
61 lines
4.5 KiB
Markdown
|
---
|
|||
|
|
title: Vue SDK
|
|||
|
|
description: Создавайте редакторы на базе OpenPencil с помощью headless-компосаблов и примитивов для Vue.
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Vue SDK
|
|||
|
|
|
|||
|
|
`@open-pencil/vue` существует для того, чтобы OpenPencil мог быть чем-то большим, чем самостоятельное дизайн-приложение.
|
|||
|
|
|
|||
|
|
Цель — сделать OpenPencil набором инструментов, который можно встроить в другие продукты, внутренние инструменты и редакторы под конкретные задачи, а не только использовать в виде единого стандартного интерфейса.
|
|||
|
|
|
|||
|
|
Приложение OpenPencil — одна из возможных компоновок этого набора. SDK — это то, с помощью чего вы создаёте другие.
|
|||
|
|
|
|||
|
|
SDK предоставляет:
|
|||
|
|
|
|||
|
|
- инжектированный контекст редактора
|
|||
|
|
- рендеринг холста на базе CanvasKit
|
|||
|
|
- компосаблы для выделения, команд, меню, панелей свойств и переменных
|
|||
|
|
- headless-структурные примитивы: `PageListRoot`, `PropertyListRoot`, `ToolbarRoot`
|
|||
|
|
- встроенные i18n-примитивы для меню, панелей, диалогов и пользовательских переключателей языка
|
|||
|
|
|
|||
|
|
## С чего начать
|
|||
|
|
|
|||
|
|
<SdkCardGroup>
|
|||
|
|
<SdkCard title="Начало работы" to="/programmable/sdk/getting-started" description="Установка пакета, создание экземпляра редактора и монтирование основных примитивов." />
|
|||
|
|
<SdkCard title="Архитектура" to="/programmable/sdk/architecture" description="Как компосаблы, примитивы и контекст редактора взаимодействуют друг с другом." />
|
|||
|
|
<SdkCard title="Руководства" to="/programmable/sdk/guides/custom-editor-shell" description="Создание оболочек, панелей свойств и навигационных панелей." />
|
|||
|
|
<SdkCard title="Справочник API" to="/programmable/sdk/api/" description="Компоненты, компосаблы и расширенные публичные API." />
|
|||
|
|
</SdkCardGroup>
|
|||
|
|
|
|||
|
|
## Зачем нужен SDK
|
|||
|
|
|
|||
|
|
Разным продуктам и командам нужны разные поверхности для редактирования.
|
|||
|
|
|
|||
|
|
Иногда нужен полноценный дизайн-редактор. Иногда — встроенный холст внутри другого приложения. Иногда — внутренний рабочий инструмент, редактор шаблонов или поверхность для редактирования с ИИ-помощником, заточенная под узкую задачу.
|
|||
|
|
|
|||
|
|
SDK — это слой, который делает всё это возможным.
|
|||
|
|
|
|||
|
|
## Принципы проектирования
|
|||
|
|
|
|||
|
|
- **Headless прежде всего**: логика и структура без стилей приложения
|
|||
|
|
- **Компосаблы вместо обёрток**: используйте компосаблы, когда нет значимой структурной координации
|
|||
|
|
- **Осознанное публичное API**: стабильные экспорты из `packages/vue/src/index.ts`
|
|||
|
|
- **Интеграция с фреймворком**: Vue-интеграция поверх `@open-pencil/core`
|
|||
|
|
|
|||
|
|
## Как устроен пакет
|
|||
|
|
|
|||
|
|
SDK состоит из двух основных слоёв:
|
|||
|
|
|
|||
|
|
1. **Компосаблы** — для состояния и действий редактора
|
|||
|
|
2. **Примитивы** — для значимой структуры UI
|
|||
|
|
|
|||
|
|
Если вам нужны только состояние и действия редактора — начните с компосаблов.
|
|||
|
|
Если вы создаёте переиспользуемые строительные блоки UI редактора — начните с примитивов.
|
|||
|
|
|
|||
|
|
## Разделы API
|
|||
|
|
|
|||
|
|
- [Компоненты](/programmable/sdk/api/components/)
|
|||
|
|
- [Компосаблы](/programmable/sdk/api/composables/)
|
|||
|
|
- [Расширенные](/programmable/sdk/api/advanced/)
|