CuzcuzSDK - 专业设计器SDK

一个功能完整的设计器SDK，提供图片编辑、文字添加、图层管理等专业设计功能。

✨ 特性

• 🎨 完整的设计器界面 - 左侧工具栏、中央画布、右侧属性面板
• 📁 文件上传 - 支持多文件上传和拖拽
• 🖼️ 图片素材库 - 内置图片素材管理
• ✏️ 文字工具 - 丰富的文字编辑功能
• 📚 图层管理 - 完整的图层操作
• 🔍 缩放控制 - 多级缩放和适应屏幕
• ↩️ 撤销重做 - 完整的历史记录管理
• 🎯 吸附线 - 智能对齐辅助
• 📏 标尺 - 精确定位工具

📦 安装

npm install @cuzcuz/sdk
# 或
yarn add @cuzcuz/sdk
# 或  
pnpm add @cuzcuz/sdk

🚀 快速开始

1. 全局注册组件

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import CuzcuzSDK from '@cuzcuz/sdk'

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

<!-- App.vue -->
<template>
  <div id="app">
    <CuzcuzDesigner 
      :width="1200"
      :height="800"
      :gallery-images="galleryImages"
      @save="handleSave"
      @preview="handlePreview"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const galleryImages = ref([
  { id: '1', url: 'https://via.placeholder.com/200x150', name: '示例图片1' },
  { id: '2', url: 'https://via.placeholder.com/300x200', name: '示例图片2' }
])

function handleSave(data: any) {
  console.log('保存设计数据:', data)
}

function handlePreview(data: any) {
  console.log('预览设计数据:', data)
}
</script>

2. 按需导入组件

<template>
  <div class="designer-container">
    <CuzcuzDesigner 
      :width="1200"
      :height="800"
      :gallery-images="galleryImages"
      @save="handleSave"
      @preview="handlePreview"
      @element-selected="handleElementSelected"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { CuzcuzDesigner, type CuzcuzDesignerProps } from '@cuzcuz/sdk'

const galleryImages: CuzcuzDesignerProps['galleryImages'] = [
  { id: '1', url: 'https://via.placeholder.com/200x150', name: '示例图片1' },
  { id: '2', url: 'https://via.placeholder.com/300x200', name: '示例图片2' },
  { id: '3', url: 'https://via.placeholder.com/250x180', name: '示例图片3' }
]

function handleSave(data: any) {
  console.log('保存设计数据:', data)
  // 发送到后端保存
}

function handlePreview(data: any) {
  console.log('预览设计数据:', data)
  // 生成预览
}

function handleElementSelected(element: any) {
  console.log('选中元素:', element)
}
</script>

<style>
.designer-container {
  width: 100vw;
  height: 100vh;
}
</style>

3. 完整示例 - 带数据持久化

<template>
  <div class="app">
    <CuzcuzDesigner 
      :width="1200"
      :height="800"
      :gallery-images="galleryImages"
      @save="saveDesign"
      @preview="previewDesign"
      @element-selected="onElementSelected"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { CuzcuzDesigner } from '@cuzcuz/sdk'

// 图片素材
const galleryImages = ref([
  { id: '1', url: '/images/template1.jpg', name: '模板1' },
  { id: '2', url: '/images/template2.jpg', name: '模板2' },
  { id: '3', url: '/images/logo.png', name: 'Logo' }
])

// 当前选中的元素
const selectedElement = ref(null)

// 加载保存的设计
onMounted(async () => {
  const savedDesign = localStorage.getItem('cuzcuz-design')
  if (savedDesign) {
    // TODO: 加载保存的设计到编辑器
    console.log('加载设计:', JSON.parse(savedDesign))
  }
})

// 保存设计
async function saveDesign(data: any) {
  try {
    // 本地存储
    localStorage.setItem('cuzcuz-design', JSON.stringify(data))
    
    // 发送到服务器
    const response = await fetch('/api/designs', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    })
    
    if (response.ok) {
      console.log('设计保存成功')
    }
  } catch (error) {
    console.error('保存失败:', error)
  }
}

// 预览设计
function previewDesign(data: any) {
  // 生成预览图或打开预览窗口
  console.log('预览数据:', data)
  
  // 可以调用后端API生成预览图
  // generatePreview(data)
}

// 元素选中事件
function onElementSelected(element: any) {
  selectedElement.value = element
  console.log('当前选中:', element)
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app {
  width: 100vw;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
</style>

📚 API 文档

CuzcuzDesigner Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | width | number | 1200 | 画布宽度 | | height | number | 800 | 画布高度 | | galleryImages | Array | [] | 图片素材列表 |

Events

| 事件名 | 参数 | 说明 | |--------|------|------| | save | data: any | 保存设计时触发 | | preview | data: any | 预览设计时触发 | | element-selected | element: IUI | null | 选中元素时触发 |

图片素材格式

interface GalleryImage {
  id: string
  url: string
  name: string
}

🎯 高级用法

自定义图片素材

// 从API获取素材
async function loadGalleryImages() {
  const response = await fetch('/api/gallery')
  const images = await response.json()
  
  galleryImages.value = images.map(img => ({
    id: img.id,
    url: img.thumbnail, // 缩略图
    name: img.title
  }))
}

扩展工具栏

<template>
  <CuzcuzDesigner>
    <!-- 可以通过插槽扩展功能 -->
    <template #toolbar>
      <button @click="customFunction">自定义功能</button>
    </template>
  </CuzcuzDesigner>
</template>

🌐 浏览器支持

• Chrome >= 88
• Firefox >= 85
• Safari >= 14
• Edge >= 88

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issues 和 Pull Requests！

📞 支持

如有问题，请联系：[email protected]