npm package: @hope-ym/lowcode-designer
Description: 一个基于 Vue 3 的低代码可视化设计器，支持拖拽式页面构建，可以快速生成 Vue 组件代码。
Latest version: 1.0.4

# Lowcode Designer

一个基于 Vue 3 的低代码可视化设计器，支持拖拽式页面构建，可以快速生成 Vue 组件代码。

## 特性

- 🎨 **可视化设计** - 拖拽式界面设计，所见即所得
- 📱 **多端适配** - 支持 PC 端和移动端页面设计
- 🔧 **灵活布局** - 支持流式布局和绝对定位布局
- 📦 **组件导出** - 一键导出标准 Vue 单文件组件
- 🎯 **类型安全** - 完整的 TypeScript 类型定义
- 🌍 **国际化** - 支持中英文界面切换

## 安装

```bash
npm install @hope-ym/lowcode-designer
# 或
yarn add @hope-ym/lowcode-designer
# 或
pnpm add @hope-ym/lowcode-designer
```

## 基础用法

### 1. 在项目中引入设计器

```javascript
import { createDesigner } from '@hope-ym/lowcode-designer'
import '@hope-ym/lowcode-designer/dist/style.css'

// 创建设计器实例
const designer = createDesigner('#app', {
  locale: 'zh-CN',
  primaryColor: '#1677ff',
  showMaterialPanel: true,
  showPropertyPanel: true,
  showToolbar: true
})
```

### 2. HTML 结构

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>低代码设计器</title>
</head>
<body>
  <div id="app"></div>
  <script src="your-script.js"></script>
</body>
</html>
```

## API 文档

### createDesigner(container, config)

创建设计器实例的主要方法。

#### 参数

- `container` (HTMLElement | string): 挂载容器，可以是 DOM 元素或选择器字符串
- `config` (DesignerConfig): 设计器配置选项

#### 返回值

返回一个 `DesignerInstance` 对象，包含以下方法：

### DesignerInstance 方法

#### getVueContent(): string

获取当前画布生成的 Vue 单文件组件内容。

```javascript
const vueCode = designer.getVueContent()
console.log(vueCode) // 输出生成的 Vue 组件代码
```

#### getCanvasData(): CanvasData

获取当前画布的数据结构，包含所有组件信息和布局数据。

```javascript
const canvasData = designer.getCanvasData()
console.log(canvasData)
// 输出：
// {
//   layoutMode: 'flow',
//   deviceType: 'pc', 
//   flowItems: [...],
//   absItems: [...]
// }
```

#### clearCanvas(): void

清空当前画布的所有内容。

```javascript
designer.clearCanvas()
```

#### exportVueComponent(fileName?): { fileName: string; content: string }

导出 Vue 组件文件内容。

```javascript
const result = designer.exportVueComponent('MyComponent.vue')
console.log(result.fileName) // 'MyComponent.vue'
console.log(result.content)  // Vue 组件代码内容

// 可以将内容写入文件
const blob = new Blob([result.content], { type: 'text/plain' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = result.fileName
a.click()
```

#### updateConfig(newConfig): void

更新设计器配置。

```javascript
designer.updateConfig({
  primaryColor: '#ff6b6b',
  showMaterialPanel: false
})
```

#### getConfig(): DesignerConfig

获取当前设计器配置。

```javascript
const config = designer.getConfig()
console.log(config)
```

#### destroy(): void

销毁设计器实例，清理资源。

```javascript
designer.destroy()
```

## 配置选项

### DesignerConfig

```typescript
interface DesignerConfig {
  /** 语言设置，默认 'zh-CN' */
  locale?: 'zh-CN' | 'en-US'
  
  /** 主题色，默认 '#1677ff' */
  primaryColor?: string
  
  /** 是否显示左侧物料面板，默认 true */
  showMaterialPanel?: boolean
  
  /** 是否显示右侧属性面板，默认 true */
  showPropertyPanel?: boolean
  
  /** 是否显示顶部工具栏，默认 true */
  showToolbar?: boolean
  
  /** 初始布局模式，默认 'flow' */
  initialLayoutMode?: 'flow' | 'absolute'
  
  /** 初始设备类型，默认 'pc' */
  initialDevice?: 'pc' | 'mobile'
}
```

## 数据结构

### CanvasData

```typescript
interface CanvasData {
  /** 布局模式：流式布局或绝对定位 */
  layoutMode: 'flow' | 'absolute'
  
  /** 设备类型：PC端或移动端 */
  deviceType: 'pc' | 'mobile'
  
  /** 流式布局数据 */
  flowItems: FlowItem[]
  
  /** 绝对定位布局数据 */
  absItems: AbsItem[]
}
```

## 使用示例

### 完整示例

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>低代码设计器示例</title>
  <link rel="stylesheet" href="node_modules/lowcode-designer/dist/style.css">
</head>
<body>
  <div id="designer-container"></div>
  
  <div style="position: fixed; top: 10px; right: 10px; z-index: 1000;">
    <button onclick="exportComponent()">导出组件</button>
    <button onclick="clearCanvas()">清空画布</button>
    <button onclick="getCanvasData()">获取数据</button>
  </div>

  <script type="module">
    import { createDesigner } from '@hope-ym/lowcode-designer'
    
    // 创建设计器实例
    const designer = createDesigner('#designer-container', {
      locale: 'zh-CN',
      primaryColor: '#1677ff',
      initialLayoutMode: 'flow',
      initialDevice: 'pc'
    })
    
    // 导出组件
    window.exportComponent = () => {
      const result = designer.exportVueComponent('MyPage.vue')
      console.log('导出的组件代码：', result.content)
      
      // 下载文件
      const blob = new Blob([result.content], { type: 'text/plain' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = result.fileName
      a.click()
      URL.revokeObjectURL(url)
    }
    
    // 清空画布
    window.clearCanvas = () => {
      designer.clearCanvas()
    }
    
    // 获取画布数据
    window.getCanvasData = () => {
      const data = designer.getCanvasData()
      console.log('画布数据：', data)
    }
  </script>
</body>
</html>
```

### Node.js 环境中使用

```javascript
const fs = require('fs')
const path = require('path')

// 假设你已经通过某种方式获取了设计器实例
// 比如在浏览器环境中通过消息传递等方式

function saveVueComponent(designer, outputDir) {
  const result = designer.exportVueComponent('GeneratedPage.vue')
  const filePath = path.join(outputDir, result.fileName)
  
  fs.writeFileSync(filePath, result.content, 'utf-8')
  console.log(`组件已保存到: ${filePath}`)
  
  return filePath
}
```

## 开发

```bash
# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建库
pnpm build:lib

# 类型检查
pnpm type-check

# 代码检查
pnpm lint
```

## 许可证

MIT

## Project Setup

```sh
pnpm install
```

### Compile and Hot-Reload for Development

```sh
pnpm dev
```

### Type-Check, Compile and Minify for Production

```sh
pnpm build
```

### Lint with [ESLint](https://eslint.org/)

```sh
pnpm lint
```