@signage-editor/ui-vue

Complete signage editor UI for Vue 3, built with Element Plus. Provides a full WYSIWYG editing experience for signage content.

Installation

pnpm add @signage-editor/ui-vue vue pinia element-plus

@signage-editor/vue, @signage-editor/core, @element-plus/icons-vue and interactjs are installed as dependencies of this package.

Peer Dependencies

| Package | Version | |---------|---------| | vue | >=3.2.47 <4.0.0 | | pinia | >=2.0.32 <3.0.0 | | element-plus | >=2.3.1 <3.0.0 |

Quick Start

<script setup>
import { SignageEditor } from '@signage-editor/ui-vue'
import '@signage-editor/ui-vue/style.css'
</script>

<template>
  <SignageEditor />
</template>

Make sure your app has Pinia and Element Plus installed:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(createPinia())
app.use(ElementPlus)
app.mount('#app')

Editor Extension Guide

@signage-editor/ui-vue supports local editor extensions. Use this when the management app needs to inject business buttons, resource panels, property panels, or custom components without changing editor core code each time.

<script setup lang="ts">
import {
  SignageEditor,
  defineEditorExtension,
} from '@signage-editor/ui-vue'
import CountdownRenderer from './CountdownRenderer.vue'
import CountdownResourcePanel from './CountdownResourcePanel.vue'
import CountdownProperties from './CountdownProperties.vue'

const countdownExtension = defineEditorExtension({
  name: 'countdown',
  apiVersion: '1',
  version: '1.0.0',
  leftMenuGroups: [
    {
      id: 'components',
      label: '组件',
      icon: '⌘',
      order: 20,
    },
  ],
  leftMenuItems: [
    {
      id: 'countdown.menu',
      groupId: 'components',
      toolType: 'countdown',
      label: '倒计时',
      icon: 'Timer',
      order: 10,
    },
  ],
  elements: [
    {
      type: 'countdown',
      plugin: {
        type: 'countdown',
        label: '倒计时',
        icon: 'Timer',
        category: '业务组件',
        defaultValues: {
          type: 'countdown',
          x: 100,
          y: 100,
          width: 360,
          height: 120,
          rotation: 0,
          opacity: 1,
          visible: true,
          locked: false,
          targetTime: '',
        },
        capabilities: { hasFill: true, hasStroke: false, positionMode: 'xywh' },
      },
      renderer: CountdownRenderer,
      resourcePanel: CountdownResourcePanel,
      propertyPanel: CountdownProperties,
    },
  ],
})
</script>

<template>
  <SignageEditor :extensions="[countdownExtension]" />
</template>

Extension Contributions

| Contribution | Description | | --- | --- | | topActions | Add buttons or commands to the top action area | | leftMenuGroups | Add second-level groups to the left toolbar, such as components | | leftMenuItems | Add tools to the left toolbar or a group; toolType maps to store.activeToolType | | elements | Register element plugin, renderer, resource panel and property panel | | hooks.beforeSave | Validate or rewrite the bundle before saving | | hooks.afterSave | Run business logic after saving |

Installation rules:

• name must be unique.
• apiVersion currently supports '1'.
• enabled: false skips the extension.
• dependsOn can require another extension by name.
• Duplicate top actions, left menu groups, left menu items and element types keep the first contribution and emit a warning.

Exports

Main

• SignageEditor — the top-level editor layout (wraps all panels and canvas)
• This package re-exports @signage-editor/vue, which itself re-exports @signage-editor/core.

Canvas Components

• CanvasArea, Artboard, ElementWrapper, EditElement
• SelectionHandles, TextEditOverlay
• PreviewPlayer, PreviewOverlay

Panel Components

• TopBar — toolbar with file operations, resolution picker, publish
• LeftBar — element type palette
• RightBar, PropertyPanel, LayerPanel — property editing and layer management
• TimelinePanel, PageThumbnail — page timeline and thumbnails

Extension Helpers

• defineEditorExtension, defineEditorExtensions
• normalizeEditorExtensions, installEditorExtensions
• EDITOR_EXTENSION_API_VERSION
• hlsVideoExtension, createHlsVideoExtension

Snapshot Helpers

• createSchemaSnapshot(source, options?) — capture a playlist or bundle with the same DOMPlayer snapshot renderer used by the editor.
• createBundleSnapshot(bundle) — capture an already-normalized bundle.
• createSnapshotBundle(source, options?) — normalize a playlist into a one-entry bundle before capture.
• saveBundleWithSnapshot(storageService, bundle, id?) — save editor content and pass the generated snapshot to the host storage service.

Optional Dependencies

There are no optional peer dependencies required for the documented setup.

Dependencies

• @signage-editor/vue — provides DOMPlayer, renderer registration and editor store types.
• @signage-editor/core — installed transitively through @signage-editor/vue.
• @element-plus/icons-vue — runtime dependency for built-in icon components.
• interactjs — runtime dependency for canvas dragging/resizing.
• html2canvas — bundled runtime dependency used for screenshot and thumbnail generation.