Vue3 Poster Editor

English | 中文

A modern poster editing system based on Vue3 + Pinia + Element Plus, supporting multi-page management, component dragging, property configuration, internationalization, and data persistence.

Features

🎨 Core Features

• Multi-page Management: Support creating, deleting, and switching between multiple pages
• Component Dragging: Drag components from the component library to the canvas
• Real-time Editing: Support component moving, scaling, and rotation
• Property Configuration: Rich component property configuration panel
• Internationalization: Support for 11 languages with dynamic language switching
• Data Persistence: Auto-save to local storage
• Responsive Design: Optimized for different screen sizes

📦 Supported Component Types

• Text Component: Support font size, color, weight, alignment configuration
• Image Component: Support image upload and URL setting
• Rectangle Component: Support fill color, border color, border width configuration
• Circle Component: Support fill color, border color, border width configuration

🛠 Tech Stack

• Vue 3: Using Composition API
• Pinia: State management
• Element Plus: UI component library
• Vue I18n: Internationalization framework
• Vite: Build tool
• Fabric.js: Canvas operations
• UUID: Unique identifier generation
• @vueuse/core: Vue composition utilities

Quick Start

Install Dependencies

npm install
# or
pnpm install

Start Development Server

npm run dev
# or
pnpm dev

Build for Production

npm run build
# or
pnpm build

Preview Production Build

npm run preview
# or
pnpm preview

Usage Guide

1. Page Management

• Click page tabs at the top to switch between pages
• Click the “+” button to add a new page
• Click the “×” on page tabs to delete pages (at least one page must remain)

2. Adding Components

• Method 1: Drag components from the left component library to the canvas
• Method 2: Click components in the library to add them directly to the canvas center

3. Editing Components

• Select: Click on components in the canvas to select them
• Move: Drag components to move them
• Scale: Drag the control points around selected components to resize
• Delete: Click the delete button in the top-right corner of selected components
• Property Editing: Modify component properties in the right property panel

4. Text Editing

• Double-click text components to enter edit mode
• Adjust font, color, and other styles in the property panel

5. Image Components

• Click the upload area of image components to select local images
• Or enter image URLs in the property panel

6. Page Settings

• Adjust page size and background color at the bottom of the left panel

7. Language Switching

• Click the language switcher in the top toolbar to change interface language
• Supports 11 languages: Chinese, English, Spanish, Korean, Japanese, Indonesian, Portuguese, German, French, Italian, Thai
• Language preference is automatically saved

Project Structure

src/
├── components/          # Components directory
│   ├── Canvas.vue          # Canvas component
│   ├── CanvasComponent.vue # Components in canvas
│   ├── ComponentLibrary.vue # Component library
│   ├── PageTabs.vue        # Page tabs
│   └── PropertiesPanel.vue # Property panel
├── stores/              # Pinia state management
│   └── editor.js           # Editor state
├── views/               # Page views
│   └── Editor.vue          # Main editor page
├── router/              # Router configuration
│   └── index.js
├── App.vue              # Root component
├── main.js              # Entry file
└── style.css            # Global styles

Data Structure

Page Data Structure

{
  id: 'uuid',
  name: 'Page Name',
  width: 800,
  height: 600,
  background: '#ffffff',
  components: []
}

Component Data Structure

{
  id: 'uuid',
  type: 'text|image|rectangle|circle',
  x: 100,
  y: 100,
  width: 200,
  height: 40,
  rotation: 0,
  props: {
    // Component-specific properties
  }
}

Extension Development

Adding New Component Types

1. Add new component definition in componentTypes in stores/editor.js
2. Add rendering logic for the new component in CanvasComponent.vue
3. Add property configuration for the new component in PropertiesPanel.vue

Adding New Languages

1. Add language configuration in src/i18n/index.js
2. Create translation files in src/i18n/locales/
3. Update the language list in LanguageSwitcher.vue

Custom Styling

• Modify global styles in src/style.css
• Modify scoped styles in individual components

Internationalization Configuration

• Translation files are located in src/i18n/locales/
• Use $t() function in templates for text translation
• Language switching is handled by the LanguageSwitcher component

License

MIT License