@hope-ym/lowcode-designer

v1.0.4

Published

10 months ago

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

0High
0Medium
0Low

xiaohudie

Lowcode Designer

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

特性

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

安装

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

基础用法

1. 在项目中引入设计器

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 结构

<!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 单文件组件内容。

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

getCanvasData(): CanvasData

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

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

clearCanvas(): void

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

designer.clearCanvas()

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

导出 Vue 组件文件内容。

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

更新设计器配置。

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

getConfig(): DesignerConfig

获取当前设计器配置。

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

destroy(): void

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

designer.destroy()

配置选项

DesignerConfig

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

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

使用示例

完整示例

<!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 环境中使用

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
}

开发

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建库
pnpm build:lib

# 类型检查
pnpm type-check

# 代码检查
pnpm lint

许可证

MIT

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Type-Check, Compile and Minify for Production

pnpm build

Lint with ESLint

pnpm lint