podesigner-sdk/README.md

专业设计器SDK - 完整的图片编辑、文字添加、图层管理解决方案

# CuzcuzSDK - 专业设计器SDK

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

## ✨ 特性

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

## 📦 安装

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

## 🚀 快速开始

### 1. 全局注册组件

```ts
// 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')
```

```vue
<!-- 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. 按需导入组件

```vue
<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. 完整示例 - 带数据持久化

```vue
<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 | 选中元素时触发 |

### 图片素材格式

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

## 🎯 高级用法

### 自定义图片素材

```ts
// 从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
  }))
}
```

### 扩展工具栏

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

## 🌐 浏览器支持

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

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issues 和 Pull Requests！

## 📞 支持

如有问题，请联系：support@cuzcuz.com