fix: readme

README.md

@@ -1,5 +1,227 @@
-# Vue 3 + TypeScript + Vite
+<h2 id="rSVWk">1. 组件概述</h2>
+ViewFile 是一个功能强大的文件预览组件，支持多种文件格式的在线预览，包括文档、表格、演示文稿、图片和文本文件等。该组件能够根据文件类型自动选择合适的渲染器进行内容展示，为用户提供便捷的文件预览体验。该项目基于 Vue 3.5 开发，请确保您的项目使用 Vue 3.x 版本。
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+<h2 id="SK0VG">2. 组件结构</h2>
+ViewFile 组件采用模块化设计，主要包含以下部分：
+
+```plain
+view_file/
+├── index.vue          # 主组件入口
+├── index.less         # 样式文件
+├── util.js            # 工具函数
+├── renders.js         # 渲染器注册
+└── vendors/           # 各类型文件渲染器
+    ├── image/         # 图片渲染
+    ├── other/         # 不支持预览的文件处理
+    ├── pdf/           # PDF渲染
+    ├── pptx/          # PPT渲染
+    ├── text/          # 文本渲染
+    └── xlsx/          # Excel渲染
+    └── colz/          # Colz渲染    
+```
+
+<h2 id="shZJb">3. 使用方法</h2>
+<h3 id="i1B2h">3.1 基本用法</h3>
+1. 安装依赖包
+
+| 依赖包名称 | 版本 | 用途 |
+| :---: | :---: | :---: |
+| docx-preview | 0.3.5 | Word 文档预览 |
+| exceljs | 4.4.0 | Excel 文件解析 |
+| pdfjs-dist | 5.1.91 | PDF 文档预览 |
+| html2canvas | 1.4.1 | HTML 转图像 |
+| tinycolor2 | 1.6.0 | 颜色处理 |
+| x-data-spreadsheet | 1.1.9 | Excel 表格渲染 |
+| lodash-es | 4.17.21 | JavaScript 工具库 |
+| element-plus | 2.9.8 | el-image 显示图片 |
+
+
+```bash
+npm install docx-preview@0.3.5 exceljs@4.4.0 pdfjs-dist html2canvas@1.4.1 tinycolor2@1.6.0 x-data-spreadsheet lodash-es element-plus
+```
+
+```bash
+yarn add docx-preview@0.3.5 exceljs@4.4.0 pdfjs-dist html2canvas@1.4.1 tinycolor2@1.6.0 x-data-spreadsheet lodash-es element-plus
+```
+
+```bash
+pnpm add docx-preview@0.3.5 exceljs@4.4.0 pdfjs-dist html2canvas@1.4.1 tinycolor2@1.6.0 x-data-spreadsheet lodash-es element-plus
+```
+
+2. 将viewFile组件源码移入项目components目录下在需要使用的页面中引入
+
+```vue
+<template>
+  <view-file
+    :file="fileObject" 
+    />
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import ViewFile from "@/components/view_file/index.vue"
+
+  const fileObject = ref({
+    filename: "示例文件.docx",
+    type: "docx",
+    fileBuffer: null // ArrayBuffer类型的文件内容
+  })
+</script>
+```
+
+<h3 id="kWppv">3.2 参数说明</h3>
+Props
+
+| 参数名 | 类型 | 默认值 | 说明 | 是否必填 |
+| :---: | :---: | :---: | :---: | :---: |
+| file | Object | {} | 文件对象，包含文件名、类型和文件内容 | 是 |
+
+
+file 对象属性
+
+| 属性名 | 类型 | 说明 | 是否必填 |
+| :---: | :---: | :---: | :---: |
+| filename | String | 文件名称 | 是 |
+| type | String | 文件类型（扩展名，如docx、xlsx等） | 是 |
+| fileBuffer | ArrayBuffer | 文件内容的二进制数据 | 是 |
+
+
+<h2 id="lns5o">4. 支持的文件类型</h2>
+ViewFile 组件支持以下文件类型的在线预览：
+
+<h3 id="HGCfn">4.1 文档类</h3>
++ Word文档 ：docx
++ PDF文档 ：pdf
+
+<h3 id="d32Wg">4.2 表格类</h3>
++ Excel表格 ：xlsx
+
+<h3 id="DXweJ">4.3 演示文稿</h3>
++ PowerPoint ：pptx
+
+<h3 id="oH43n">4.4 图片类</h3>
+支持多种图片格式：
+
++ gif
++ jpg/jpeg
++ bmp
++ tiff/tif
++ png
++ svg
+
+<h3 id="ggdtM">4.5 文本类</h3>
+支持多种文本和代码文件：
+
++ txt（纯文本）
++ json（JSON数据）
++ js（JavaScript）
++ css（样式表）
++ java（Java代码）
++ py（Python代码）
++ html（HTML文档）
++ jsx（React JSX）
++ ts/tsx（TypeScript）
++ xml（XML文档）
++ md（Markdown）
++ log（日志文件）
+
+<h2 id="wc5fk">5. 示例代码</h2>
+<h3 id="XRxq1">5.1 从文件对象创建预览</h3>
+```vue
+<template>
+  <div>
+    <input type="file" @change="handleFileChange" />
+    <view-file
+      :file="fileObject" 
+    />
+  </div>
+</template>
+<script setup>
+import ViewFile from "@/components/view_file/index.vue"
+import { readBuffer } from "@/components/view_file/util"
+
+const fileObject = ref({
+  filename: "",
+  type: "",
+  fileBuffer: null
+})
+    
+const handleFileChange = async (e) => {
+  const file = e.target.files[0]
+  if (!file) return
+    try {
+      const buffer = await readBuffer(file)
+      this.fileObject = {
+        filename: file.name,
+        type: file.name.split('.').pop().toLowerCase(),
+        fileBuffer: buffer,
+      }
+    } catch (error) {
+       console.error('文件读取失败', error)
+    } 
+}
+</script>
+
+```
+
+<h3 id="GfNtc">5.2 从服务器获取文件并预览</h3>
+假设请求返回数据格式response.data
+
+| 属性名 | 类型 | 说明 |
+| :---: | :---: | :---: |
+| filename | String | 文件名称 |
+| file | Blob | 文件内容数据 |
+
+
+```vue
+<template>
+  <view-file 
+    :file="fileObject" 
+  />
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import ViewFile from "@/components/view_file/index.vue"
+import { readBuffer } from "@/components/view_file/util"
+import axios from 'axios'
+
+const route = useRoute()
+const fileObject = ref({
+  filename: "",
+  type: "",
+  fileBuffer: null
+})
+
+const fetchFile = async (fileId) => {
+  try {
+    const response = await axios.get(`/api/files/${fileId}`)
+    const name = response.data.filename
+    // 获取文件名和类型
+    fileObject.value.filename = name
+    fileObject.value.type = name.split('.').pop().toLowerCase()
+    const arrayBuffer = await readBuffer(response.data.file)
+    fileObject.value.fileBuffer = arrayBuffer
+  } catch (error) {
+    console.error('文件获取失败', error)
+  }
+}
+
+onMounted(() => {
+  // 从路由参数获取文件ID
+  const fileId = route.params.fileId
+  if (fileId) {
+    fetchFile(fileId)
+  }
+})
+</script>
+
+```
+
+<h2 id="Dc4BG">6. 注意事项</h2>
+1. 确保提供正确的文件类型（扩展名），组件根据扩展名选择渲染器
+2. 文件内容必须是 ArrayBuffer 格式
+3. 大文件可能会影响性能，特别是复杂的Excel或PDF文件
+4. 对于不支持的文件类型，组件会显示提示信息而不是尝试渲染
+5. 组件内部已处理异常，但建议在外部添加错误处理逻辑
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSpinner: typeof import('element-plus/es')['ElSpinner']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     ImageViewer: typeof import('./src/components/view_file/vendors/image/ImageViewer.vue')['default']
     Other: typeof import('./src/components/view_file/vendors/other/index.vue')['default']

src/components/view_file/vendors/pptx/PPT2.vue

@@ -1,4794 +0,0 @@
-<!--
- * @Author: LiZhiWei
- * @Date: 2025-04-10 14:38:27
- * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-25 08:43:54
- * @Description:
--->
-<template>
-  <div id="pptx-container" ref="pptxContainer" class="pptx-container"></div>
-</template>
-
-<script setup>
-import { ref, watch, onMounted } from "vue"
-
-const props = defineProps({
-  pptxJson: Object,
-})
-
-const pptxContainer = ref(null)
-
-// 渲染幻灯片
-const renderSlides = () => {
-  if (!pptxContainer.value || !props.pptxJson) return
-
-  pptxContainer.value.innerHTML = ""
-  const { size, slides } = props.pptxJson
-
-  slides.forEach((slide, index) => {
-    const slideElement = createSlideElement(size.width, size.height)
-    applySlideBackground(slideElement, slide.fill)
-    if (slide.layoutElements && Array.isArray(slide.layoutElements)) {
-      processElements(slide.layoutElements, index + 1)
-      slide.layoutElements.forEach((element) => {
-        const el = createElementByType(element)
-        if (!el) return
-        slideElement.appendChild(el)
-      })
-    }
-
-    // 渲染幻灯片元素
-    if (slide.elements && Array.isArray(slide.elements)) {
-      processElements(slide.elements, index + 1)
-      slide.elements.forEach((element) => {
-        const el = createElementByType(element)
-        if (!el) return
-        slideElement.appendChild(el)
-      })
-    }
-
-    // 添加幻灯片到容器
-    pptxContainer.value.appendChild(slideElement)
-  })
-  // 为所有p标签应用样式
-  const pTags = pptxContainer.value.querySelectorAll("p")
-  pTags.forEach((p) => {
-    p.style.margin = "0px"
-    p.style.padding = "0px"
-    p.style.wordBreak = "break-word"
-    p.style.lineHeight = "1"
-  })
-  const ulTags = pptxContainer.value.querySelectorAll("ul")
-  ulTags.forEach((ul) => {
-    ul.style.wordBreak = "break-word"
-    ul.style.lineHeight = "1"
-    ul.style.padding = "auto 0px"
-    ul.style.margin = "0px"
-  })
-  const olTags = pptxContainer.value.querySelectorAll("ol")
-  olTags.forEach((ol) => {
-    ol.style.margin = "0px"
-    ol.style.padding = "auto 0px"
-    ol.style.wordBreak = "break-word"
-    ol.style.lineHeight = "1"
-  })
-}
-
-// 创建幻灯片元素
-const createSlideElement = (width, height) => {
-  const slideElement = document.createElement("div")
-  slideElement.className = "slide"
-  slideElement.style.position = "relative"
-  slideElement.style.width = width + "px"
-  slideElement.style.height = height + "px"
-  slideElement.style.border = "1px solid #ccc"
-  slideElement.style.margin = "0px auto"
-  slideElement.style.marginBottom = "20px"
-  slideElement.style.overflow = "hidden"
-  return slideElement
-}
-
-// 应用幻灯片背景
-const applySlideBackground = (slideElement, fill) => {
-  if (!fill) return
-
-  if (fill.type === "gradient") {
-    const { colors, path, rot } = fill.value
-
-    if (colors && colors.length >= 2) {
-      const gradientType = path === "rect" ? "linear" : "radial"
-      const gradientAngle =
-        gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
-
-      let gradientString = `${gradientType}-gradient(`
-      if (gradientType === "linear") {
-        gradientString += `${gradientAngle}deg, `
-      }
-
-      colors.forEach((color, i) => {
-        gradientString += `${color.color} ${color.pos}${
-          i < colors.length - 1 ? ", " : ""
-        }`
-      })
-
-      gradientString += ")"
-      slideElement.style.background = gradientString
-    }
-  } else if (fill.type === "color") {
-    slideElement.style.backgroundColor = fill.value || "#FFFFFF"
-  } else if (fill.type === "image" && fill.value.picBase64) {
-    // 设置背景图片
-    slideElement.style.backgroundImage = `url(${fill.value.picBase64})`
-    slideElement.style.backgroundSize = "cover"
-    slideElement.style.backgroundPosition = "center"
-    slideElement.style.backgroundRepeat = "no-repeat"
-
-    // 如果有背景图片的混合模式
-    if (fill.value.blendMode) {
-      slideElement.style.backgroundBlendMode = fill.value.blendMode
-    }
-
-    // 如果有透明度设置
-    if (fill.value.opacity !== undefined) {
-      slideElement.style.opacity = fill.value.opacity
-    }
-  }
-}
-
-// 根据元素类型创建DOM元素
-const createElementByType = (element) => {
-  switch (element.type) {
-    case "image":
-      return createImageElement(element)
-    case "video":
-      return createVideoElement(element)
-    case "audio":
-      return createAudioElement(element)
-    case "shape":
-      return createShapeElement(element)
-    case "table":
-      return createTableElement(element)
-    case "chart":
-      return createChartElement(element)
-    case "diagram":
-      return createDiagramElement(element)
-    case "math":
-      return createMathElement(element)
-    case "group":
-      return createGroupElement(element)
-    default:
-      return createTextElement(element)
-  }
-}
-
-// 创建组合元素
-const createGroupElement = (element) => {
-  // 创建组合容器
-  const groupContainer = document.createElement("div")
-  groupContainer.className = "group-element"
-  groupContainer.style.position = "absolute"
-  groupContainer.style.top = element.top + "px"
-  groupContainer.style.left = element.left + "px"
-  groupContainer.style.width = element.width + "px"
-  groupContainer.style.height = element.height + "px"
-  groupContainer.style.zIndex = element.order
-  groupContainer.style.transformOrigin = "center center"
-
-  // 创建内部容器来处理子元素
-  const innerContainer = document.createElement("div")
-  innerContainer.style.position = "relative"
-  innerContainer.style.width = "100%"
-  innerContainer.style.height = "100%"
-
-  // 应用旋转变换
-  if (element.rotate) {
-    groupContainer.style.transform = `rotate(${element.rotate}deg)`
-  }
-
-  // 应用其他样式属性
-  if (element.opacity !== undefined) {
-    groupContainer.style.opacity = element.opacity
-  }
-
-  // 递归渲染组内的所有子元素
-  if (element.elements && Array.isArray(element.elements)) {
-    element.elements.forEach((childElement) => {
-      const childCopy = JSON.parse(JSON.stringify(childElement))
-      const childEl = createElementByType(childCopy)
-      if (childEl) {
-        innerContainer.appendChild(childEl)
-      }
-    })
-  }
-
-  groupContainer.appendChild(innerContainer)
-  return groupContainer
-}
-
-// 创建图像元素
-const createImageElement = (element) => {
-  const img = document.createElement("img")
-  img.src = element.src
-  img.style.width = element.width + "px"
-  img.style.height = element.height + "px"
-  img.style.objectFit = "cover" // 保持图像的宽高比并填充容器
-  img.style.position = "absolute"
-  img.style.top = `${element.top}px`
-  img.style.left = `${element.left}px`
-  img.style.zIndex = element.order
-
-  return img
-}
-
-// 创建视频元素
-const createVideoElement = (element) => {
-  const el = document.createElement("video")
-  el.src = element.blob
-  el.controls = true
-  el.style.width = element.width + "px"
-  el.style.height = element.height + "px"
-  el.style.position = "absolute"
-  el.style.top = element.top + "px"
-  el.style.left = element.left + "px"
-  el.style.zIndex = element.order
-  return el
-}
-
-// 创建音频元素
-const createAudioElement = (element) => {
-  const el = document.createElement("audio")
-  el.src = element.blob
-  el.controls = true
-  el.style.height = element.height + "px"
-  el.style.position = "absolute"
-  el.style.top = element.top + "px"
-  el.style.left = element.left + "px"
-  el.style.zIndex = element.order
-  return el
-}
-
-// 创建形状元素
-const createShapeElement = (element) => {
-  const el = document.createElement("div")
-  el.style.position = "absolute"
-  el.style.top = element.top + "px"
-  el.style.left = element.left + "px"
-  el.style.width = element.width + "px"
-  el.style.height = element.height + "px"
-  el.style.zIndex = element.order
-  el.style.overflow = "visible"
-  if (element.height === 0) {
-    // 如果高度为0，直接在div上绘制边框
-    el.style.borderTop = `${element.borderWidth || 1}px ${
-      element.borderType || "solid"
-    } ${element.borderColor || "#000"}`
-  }
-  // 使用SVG绘制形状
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
-  svg.setAttribute("width", "100%")
-  svg.setAttribute("height", "100%")
-  svg.setAttribute("viewBox", `0 0 ${element.width} ${element.height}`)
-  svg.style.overflow = "visible"
-
-  const setBackground = (element, shape) => {
-    if (element.fill && element.fill.type) {
-      // 设置填充色
-      if (element.fill.type === "color") {
-        shape.setAttribute("fill", element.fill.value || "transparent")
-      } else if (element.fill.type === "gradient") {
-        // 渐变填充
-        const { colors, path, rot } = element.fill.value
-
-        if (colors && colors.length >= 2) {
-          const gradientType = path === "rect" ? "linear" : "radial"
-          const gradientAngle =
-            gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
-
-          let gradientString = `${gradientType}-gradient(`
-          if (gradientType === "linear") {
-            gradientString += `${gradientAngle}deg, `
-          }
-
-          colors.forEach((color, i) => {
-            gradientString += `${color.color} ${color.pos}${
-              i < colors.length - 1 ? ", " : ""
-            }`
-          })
-          gradientString += ")"
-
-          // 创建渐变定义
-          const gradientDef = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "defs"
-          )
-          const gradientEl = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            gradientType === "linear" ? "linearGradient" : "radialGradient"
-          )
-          const gradientId = `gradient-${Date.now()}-${Math.random()
-            .toString(36)
-            .substr(2, 9)}`
-          gradientEl.setAttribute("id", gradientId)
-
-          // 设置渐变属性
-          if (gradientType === "linear") {
-            gradientEl.setAttribute(
-              "gradientTransform",
-              `rotate(${gradientAngle})`
-            )
-          }
-
-          // 添加渐变色标
-          colors.forEach((color) => {
-            const stop = document.createElementNS(
-              "http://www.w3.org/2000/svg",
-              "stop"
-            )
-            stop.setAttribute("offset", color.pos)
-            stop.setAttribute("stop-color", color.color)
-            gradientEl.appendChild(stop)
-          })
-
-          gradientDef.appendChild(gradientEl)
-          svg.appendChild(gradientDef)
-
-          // 应用渐变
-          shape.setAttribute("fill", `url(#${gradientId})`)
-        }
-      } else if (element.fill.type === "image") {
-        // 创建图案填充
-        const pattern = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "pattern"
-        )
-        const patternId = `pattern-${Date.now()}-${Math.random()
-          .toString(36)
-          .substr(2, 9)}`
-        pattern.setAttribute("id", patternId)
-        pattern.setAttribute("patternUnits", "userSpaceOnUse")
-        pattern.setAttribute("width", "100%")
-        pattern.setAttribute("height", "100%")
-
-        // 创建图片元素
-        const image = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "image"
-        )
-        image.setAttribute("width", "100%")
-        image.setAttribute("height", "100%")
-        image.setAttribute("preserveAspectRatio", "xMidYMid slice")
-        image.setAttributeNS(
-          "http://www.w3.org/1999/xlink",
-          "href",
-          element.fill.value.picBase64
-        )
-
-        pattern.appendChild(image)
-
-        // 添加pattern到defs
-        const defs = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "defs"
-        )
-        defs.appendChild(pattern)
-        svg.appendChild(defs)
-
-        // 应用图案填充
-        shape.setAttribute("fill", `url(#${patternId})`)
-      } else {
-        shape.setAttribute("fill", "transparent")
-      }
-    } else {
-      shape.setAttribute("fill", "#ffffff00")
-    }
-  }
-
-  // 根据形状类型创建不同的SVG元素
-  switch (element.shapType) {
-    case "roundRect":
-      const radius = Math.min(element.width, element.height) * 0.1
-      const roundRect = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "rect"
-      )
-      roundRect.setAttribute("x", 0)
-      roundRect.setAttribute("y", 0)
-      roundRect.setAttribute("width", element.width)
-      roundRect.setAttribute("height", element.height)
-      roundRect.setAttribute("rx", radius)
-      roundRect.setAttribute("ry", radius)
-
-      // 设置填充色
-      setBackground(element, roundRect)
-      // 设置边框
-      if (element.borderWidth > 0) {
-        roundRect.setAttribute("stroke", element.borderColor || "#000")
-        roundRect.setAttribute("stroke-width", element.borderWidth || 1)
-        roundRect.setAttribute("stroke-linejoin", "round") // 设置连接处为圆角
-        roundRect.setAttribute("vector-effect", "non-scaling-stroke") // 防止边框宽度变形
-        roundRect.setAttribute("shape-rendering", "geometricPrecision") // 提高渲染精度
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            roundRect.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            roundRect.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            roundRect.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(roundRect)
-      break
-    case "snip1Rect":
-      // 使用path元素绘制剪去单角的矩形
-      const snip1Rect = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 计算剪角的大小，通常为矩形较短边的20%
-      const snipSize = Math.min(element.width, element.height) * 0.35
-
-      // 绘制路径：从左上角开始，顺时针方向，右上角被剪去
-      snip1Rect.setAttribute(
-        "d",
-        `M0,0 ` +
-          `L${element.width - snipSize},0 ` +
-          `L${element.width},${snipSize} ` +
-          `L${element.width},${element.height} ` +
-          `L0,${element.height} ` +
-          `Z`
-      )
-
-      // 设置填充色
-      setBackground(element, snip1Rect)
-      // 设置边框
-      if (element.borderWidth > 0) {
-        snip1Rect.setAttribute("stroke", element.borderColor || "#000")
-        snip1Rect.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            snip1Rect.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            snip1Rect.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            snip1Rect.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-      svg.appendChild(snip1Rect)
-      break
-    case "snip2SameRect":
-      // 使用path元素绘制剪去四个角的矩形
-      const snip2SameRect = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 计算剪角的大小，通常为矩形较短边的20%
-      const snip2Size = Math.min(element.width, element.height) * 0.35
-
-      // 绘制路径：从左上角开始，顺时针方向，剪去四个角
-      snip2SameRect.setAttribute(
-        "d",
-        `M${snip2Size},0 ` +
-          `L${element.width - snip2Size},0 ` +
-          `L${element.width},${snip2Size} ` +
-          `L${element.width},${element.height - snip2Size} ` +
-          `L${element.width - snip2Size},${element.height} ` +
-          `L${snip2Size},${element.height} ` +
-          `L0,${element.height - snip2Size} ` +
-          `L0,${snip2Size} ` +
-          `Z`
-      )
-
-      // 设置填充色
-      setBackground(element, snip2SameRect)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        snip2SameRect.setAttribute("stroke", element.borderColor || "#000")
-        snip2SameRect.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            snip2SameRect.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            snip2SameRect.setAttribute("stroke-dasharray", "2, 2")
-            snip2SameRect.setAttribute("stroke-linecap", "round")
-          } else if (element.borderType === "dashed") {
-            snip2SameRect.setAttribute("stroke-dasharray", "6, 3")
-          }
-        }
-
-        // 添加这些属性以确保边框正确渲染
-        snip2SameRect.setAttribute("vector-effect", "non-scaling-stroke")
-        snip2SameRect.setAttribute("shape-rendering", "geometricPrecision")
-      }
-
-      svg.appendChild(snip2SameRect)
-      break
-    case "line":
-      // 创建直线连接符
-      const line = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "line"
-      )
-      // 设置SVG的最小高度为1px
-      const svgHeight = element.height > 0 ? element.height : 1
-      svg.setAttribute("height", svgHeight + "px")
-
-      // 设置线条的起点和终点
-      line.setAttribute("x1", 0)
-      line.setAttribute("y1", 0)
-      line.setAttribute("x2", element.width)
-      line.setAttribute("y2", svgHeight)
-
-      // 确保边框颜色和宽度被正确设置
-      line.setAttribute("stroke", element.borderColor || "#000")
-      line.setAttribute("stroke-width", element.borderWidth || 1)
-
-      // 处理虚线样式
-      if (element.borderType === "dotted" || element.borderType === "dashed") {
-        if (element.borderStrokeDasharray) {
-          line.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
-        } else if (element.borderType === "dotted") {
-          line.setAttribute("stroke-dasharray", "2, 2")
-          line.setAttribute("stroke-linecap", "round") // 添加圆角端点使点线更明显
-        } else if (element.borderType === "dashed") {
-          line.setAttribute("stroke-dasharray", "6, 3")
-        }
-      }
-
-      // 确保线条正确渲染
-      line.setAttribute("vector-effect", "non-scaling-stroke") // 防止缩放影响线条宽度
-      svg.appendChild(line)
-      break
-    case "snip2DiagRect":
-      // 使用path元素绘制剪去右上角和左下角的矩形
-      const snip2DiagRect = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 计算剪角的大小，通常为矩形较短边的35%
-      const snipDiagSize = Math.min(element.width, element.height) * 0.35
-
-      // 绘制路径：从左上角开始，顺时针方向，右上角和左下角被剪去
-      snip2DiagRect.setAttribute(
-        "d",
-        `M0,0 ` +
-          `L${element.width - snipDiagSize},0 ` +
-          `L${element.width},${snipDiagSize} ` +
-          `L${element.width},${element.height} ` +
-          `L${snipDiagSize},${element.height} ` +
-          `L0,${element.height - snipDiagSize} ` +
-          `Z`
-      )
-
-      // 设置填充色
-      setBackground(element, snip2DiagRect)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        snip2DiagRect.setAttribute("stroke", element.borderColor || "#000")
-        snip2DiagRect.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            snip2DiagRect.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            snip2DiagRect.setAttribute("stroke-dasharray", "2, 2")
-            snip2DiagRect.setAttribute("stroke-linecap", "round")
-          } else if (element.borderType === "dashed") {
-            snip2DiagRect.setAttribute("stroke-dasharray", "6, 3")
-          }
-        }
-
-        // 添加这些属性以确保边框正确渲染
-        snip2DiagRect.setAttribute("vector-effect", "non-scaling-stroke")
-        snip2DiagRect.setAttribute("shape-rendering", "geometricPrecision")
-      }
-
-      svg.appendChild(snip2DiagRect)
-      break
-    case "snipRoundRect":
-      const snipRoundRect = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      // 计算剪切大小和圆角大小
-      const snipSize2 = Math.min(element.width, element.height) * 0.4
-      const roundSize = Math.min(element.width, element.height) * 0.5
-
-      // 绘制路径：从左上角开始，顺时针方向，左上为圆角，右上为剪切角
-      snipRoundRect.setAttribute(
-        "d",
-        `M${roundSize},0 ` +
-          `L${element.width - snipSize2},0 ` +
-          `L${element.width},${snipSize2} ` +
-          `L${element.width},${element.height} ` +
-          `L0,${element.height} ` +
-          `L0,${roundSize} ` +
-          `A${roundSize},${roundSize} 0 0,1 ${roundSize},0 ` +
-          `Z`
-      )
-
-      // 设置填充色
-      setBackground(element, snipRoundRect)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        snipRoundRect.setAttribute("stroke", element.borderColor || "#000")
-        snipRoundRect.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            snipRoundRect.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            snipRoundRect.setAttribute("stroke-dasharray", "2, 2")
-            snipRoundRect.setAttribute("stroke-linecap", "round")
-          } else if (element.borderType === "dashed") {
-            snipRoundRect.setAttribute("stroke-dasharray", "6, 3")
-          }
-        }
-
-        snipRoundRect.setAttribute("vector-effect", "non-scaling-stroke")
-        snipRoundRect.setAttribute("shape-rendering", "geometricPrecision")
-      }
-
-      svg.appendChild(snipRoundRect)
-      break
-    case "round1Rect":
-      const round1Rect = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      // 计算圆角大小
-      const round1Size = Math.min(element.width, element.height) * 0.5
-
-      // 绘制路径：从左上角开始，顺时针方向，右上角为圆角
-      round1Rect.setAttribute(
-        "d",
-        `M0,0 ` +
-          `L${element.width - round1Size},0 ` +
-          `Q${element.width},0 ${element.width},${round1Size} ` +
-          `L${element.width},${element.height} ` +
-          `L0,${element.height} ` +
-          `Z`
-      )
-
-      // 设置填充色
-      setBackground(element, round1Rect)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        round1Rect.setAttribute("stroke", element.borderColor || "#000")
-        round1Rect.setAttribute("stroke-width", element.borderWidth || 1)
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            round1Rect.setAttribute("stroke-dasharray", "40,15,5,15")
-          } else if (element.borderType === "dotted") {
-            round1Rect.setAttribute("stroke-dasharray", "2, 2")
-            round1Rect.setAttribute("stroke-linecap", "round")
-          } else if (element.borderType === "dashed") {
-            round1Rect.setAttribute("stroke-dasharray", "6, 3")
-          }
-        }
-
-        round1Rect.setAttribute("vector-effect", "non-scaling-stroke")
-        round1Rect.setAttribute("shape-rendering", "geometricPrecision")
-      }
-
-      svg.appendChild(round1Rect)
-      break
-    case "ellipse":
-    case "circle":
-      const ellipse = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "ellipse"
-      )
-      ellipse.setAttribute("cx", element.width / 2)
-      ellipse.setAttribute("cy", element.height / 2)
-      ellipse.setAttribute("rx", element.width / 2)
-      ellipse.setAttribute("ry", element.height / 2)
-
-      // 设置填充色
-      setBackground(element, ellipse)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        ellipse.setAttribute("stroke", element.borderColor || "#000")
-        ellipse.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            ellipse.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            ellipse.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            ellipse.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(ellipse)
-      break
-    case "round2SameRect":
-      const round2SameRect = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      // 计算圆角大小
-      const round2Size = Math.min(element.width, element.height) * 0.5
-
-      // 绘制路径：从左上角开始，顺时针方向，左上和右上为圆角
-      round2SameRect.setAttribute(
-        "d",
-        `M${round2Size},0 ` +
-          `L${element.width - round2Size},0 ` +
-          `Q${element.width},0 ${element.width},${round2Size} ` +
-          `L${element.width},${element.height} ` +
-          `L0,${element.height} ` +
-          `L0,${round2Size} ` +
-          `Q0,0 ${round2Size},0 ` +
-          `Z`
-      )
-
-      // 设置填充色
-      setBackground(element, round2SameRect)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        round2SameRect.setAttribute("stroke", element.borderColor || "#000")
-        round2SameRect.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            round2SameRect.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            round2SameRect.setAttribute("stroke-dasharray", "2, 2")
-            round2SameRect.setAttribute("stroke-linecap", "round")
-          } else if (element.borderType === "dashed") {
-            round2SameRect.setAttribute("stroke-dasharray", "6, 3")
-          }
-        }
-
-        round2SameRect.setAttribute("vector-effect", "non-scaling-stroke")
-        round2SameRect.setAttribute("shape-rendering", "geometricPrecision")
-      }
-
-      svg.appendChild(round2SameRect)
-      break
-    case "round2DiagRect":
-      const round2DiagRect = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      // 计算圆角大小
-      const round2DiagSize = Math.min(element.width, element.height) * 0.5
-
-      // 绘制路径：从左上角开始，顺时针方向，左上和右下为圆角
-      round2DiagRect.setAttribute(
-        "d",
-        `M${round2DiagSize},0 ` +
-          `L${element.width},0 ` +
-          `L${element.width},${element.height - round2DiagSize} ` +
-          `Q${element.width},${element.height} ${
-            element.width - round2DiagSize
-          },${element.height} ` +
-          `L0,${element.height} ` +
-          `L0,${round2DiagSize} ` +
-          `Q0,0 ${round2DiagSize},0 ` +
-          `Z`
-      )
-
-      // 设置填充色
-      setBackground(element, round2DiagRect)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        round2DiagRect.setAttribute("stroke", element.borderColor || "#000")
-        round2DiagRect.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            round2DiagRect.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            round2DiagRect.setAttribute("stroke-dasharray", "2, 2")
-            round2DiagRect.setAttribute("stroke-linecap", "round")
-          } else if (element.borderType === "dashed") {
-            round2DiagRect.setAttribute("stroke-dasharray", "6, 3")
-          }
-        }
-
-        round2DiagRect.setAttribute("vector-effect", "non-scaling-stroke")
-        round2DiagRect.setAttribute("shape-rendering", "geometricPrecision")
-      }
-
-      svg.appendChild(round2DiagRect)
-      break
-    case "triangle":
-      const triangle = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      triangle.setAttribute(
-        "points",
-        `${element.width / 2},0 ${element.width},${element.height} 0,${
-          element.height
-        }`
-      )
-
-      // 设置填充色
-      setBackground(element, triangle)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        triangle.setAttribute("stroke", element.borderColor || "#000")
-        triangle.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            triangle.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            triangle.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            triangle.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(triangle)
-      break
-    case "arc":
-      const arc = document.createElementNS("http://www.w3.org/2000/svg", "path")
-
-      // 计算弧形的参数
-      const arcRadius = Math.min(element.width, element.height) / 2
-
-      // 绘制弧形路径
-      arc.setAttribute(
-        "d",
-        `M${arcRadius},0 ` +
-          `A${arcRadius},${arcRadius} 0 1 1 ${arcRadius * 0.15},${
-            arcRadius * 0.5
-          }`
-      )
-
-      // 设置填充色
-      arc.setAttribute("fill", "transparent")
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        arc.setAttribute("stroke", element.borderColor || "#000")
-        arc.setAttribute("stroke-width", element.borderWidth || 0.5)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            arc.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
-          } else if (element.borderType === "dotted") {
-            arc.setAttribute("stroke-dasharray", "2, 2")
-            arc.setAttribute("stroke-linecap", "round")
-          } else if (element.borderType === "dashed") {
-            arc.setAttribute("stroke-dasharray", "6, 3")
-          }
-        }
-
-        arc.setAttribute("vector-effect", "non-scaling-stroke")
-        arc.setAttribute("shape-rendering", "geometricPrecision")
-      } else {
-        arc.setAttribute("stroke", element.borderColor || "#000")
-        arc.setAttribute("stroke-width", 0.5)
-      }
-
-      svg.appendChild(arc)
-      break
-    case "custom":
-      const customPath = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 直接使用传入的 path 数据
-      customPath.setAttribute("d", element.path || "")
-
-      // 设置填充色
-      setBackground(element, customPath)
-      // 设置边框
-      if (element.borderWidth > 0) {
-        customPath.setAttribute("stroke", element.borderColor || "#000")
-        customPath.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            customPath.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            customPath.setAttribute("stroke-dasharray", "2, 2")
-            customPath.setAttribute("stroke-linecap", "round")
-          } else if (element.borderType === "dashed") {
-            customPath.setAttribute("stroke-dasharray", "6, 3")
-          }
-        }
-
-        customPath.setAttribute("vector-effect", "non-scaling-stroke")
-        customPath.setAttribute("shape-rendering", "geometricPrecision")
-      }
-
-      svg.appendChild(customPath)
-      break
-    case "teardrop":
-      const teardrop = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 计算泪珠形状的参数
-      const tdCenterX = element.width / 2
-      const tdCenterY = element.height / 2
-      const tdRadiusX = element.width / 2
-      const tdRadiusY = element.height / 2
-
-      // 使用相对比例计算控制点
-      teardrop.setAttribute(
-        "d",
-        `M${tdCenterX * 2} ${tdCenterY} ` +
-          `A ${tdRadiusX} ${tdRadiusY} 0 1 1 ${tdCenterX} 0 ` +
-          `Q${tdCenterX * 1.7},0 ${tdCenterX * 2.1},${-tdCenterY * 0.1} ` +
-          `Q${tdCenterX * 2},${tdCenterY * 0.29} ${tdCenterX * 2},${tdCenterY}`
-      )
-
-      // 设置填充色
-      setBackground(element, teardrop)
-
-      // 设置边框样式
-      if (element.borderWidth > 0) {
-        teardrop.setAttribute("stroke", element.borderColor || "#000")
-        teardrop.setAttribute("stroke-width", element.borderWidth || 1)
-        teardrop.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          // ... 原有的虚线边框处理代码 ...
-        }
-      }
-
-      svg.appendChild(teardrop)
-      break
-    case "decagon":
-      const decagon = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-
-      // 计算十边形的顶点
-      let decagonPoints = ""
-      for (let i = 0; i < 10; i++) {
-        const angle = (i * 2 * Math.PI) / 10 - Math.PI / 2 // 从顶部开始
-        const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
-        const y = element.height / 2 + (element.height / 2) * Math.sin(angle)
-        decagonPoints += `${x},${y} `
-      }
-      decagon.setAttribute("points", decagonPoints.trim())
-
-      // 设置填充色
-      setBackground(element, decagon)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        decagon.setAttribute("stroke", element.borderColor || "#000")
-        decagon.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            decagon.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            decagon.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            decagon.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(decagon)
-      break
-    case "pentagon":
-      const pentagon = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      pentagon.setAttribute(
-        "points",
-        `${element.width / 2},0 ${element.width},${element.height * 0.38} ` +
-          `${element.width * 0.82},${element.height} ${element.width * 0.18},${
-            element.height
-          } ` +
-          `0,${element.height * 0.38}`
-      )
-
-      // 设置填充色
-      setBackground(element, pentagon)
-      // 设置边框
-      if (element.borderWidth > 0) {
-        pentagon.setAttribute("stroke", element.borderColor || "#000")
-        pentagon.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            pentagon.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            pentagon.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            pentagon.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(pentagon)
-      break
-    case "pie":
-      const pie = document.createElementNS("http://www.w3.org/2000/svg", "path")
-
-      // 使用提供的路径数据，但保留元素的宽高比例
-      const centerX = element.width / 2
-      const centerY = element.height / 2
-      const radius2 = Math.min(element.width, element.height) / 2
-
-      // 绘制饼图，使用类似提供的路径数据
-      pie.setAttribute(
-        "d",
-        `M${centerX},${centerY} ` +
-          `L${centerX * 1.85},${centerY * 1.52} ` +
-          `A${radius2},${radius2} 0 1,1 ${centerX * 1.56},${centerY * 0.17} ` +
-          `Z`
-      )
-
-      // 设置填充色
-      setBackground(element, pie)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        pie.setAttribute("stroke", element.borderColor || "#000")
-        pie.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            pie.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
-          } else if (element.borderType === "dotted") {
-            pie.setAttribute("stroke-dasharray", "2, 2")
-            pie.setAttribute("stroke-linecap", "round")
-          } else if (element.borderType === "dashed") {
-            pie.setAttribute("stroke-dasharray", "6, 3")
-          }
-        }
-
-        pie.setAttribute("vector-effect", "non-scaling-stroke")
-        pie.setAttribute("shape-rendering", "geometricPrecision")
-      }
-
-      svg.appendChild(pie)
-      break
-    case "chord":
-      const chord = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 计算弦形的参数
-      const chordRadiusX = element.width * 0.4
-      const chordRadiusY = element.height * 0.4
-      // 绘制弦形 - 使用更大的圆弧和不同的起始/结束点
-      chord.setAttribute(
-        "d",
-        `M${element.width * 0.4},${element.height * 0.9} ` +
-          `A ${chordRadiusX} ${chordRadiusY} 0 1 1 ${element.width * 0.8},${
-            element.height * 0.5
-          } ` +
-          `Z`
-      )
-
-      // 设置填充色
-      setBackground(element, chord)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        chord.setAttribute("stroke", element.borderColor || "#000")
-        chord.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            chord.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            chord.setAttribute("stroke-dasharray", "2, 2")
-            chord.setAttribute("stroke-linecap", "round")
-          } else if (element.borderType === "dashed") {
-            chord.setAttribute("stroke-dasharray", "6, 3")
-          }
-        }
-
-        chord.setAttribute("vector-effect", "non-scaling-stroke")
-        chord.setAttribute("shape-rendering", "geometricPrecision")
-      }
-
-      svg.appendChild(chord)
-      break
-    case "heptagon":
-      const heptagon = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-
-      // 计算七边形的顶点
-      let heptagonPoints = ""
-      for (let i = 0; i < 7; i++) {
-        const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2 // 从顶部开始
-        const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
-        const y = element.height / 2 + (element.height / 2) * Math.sin(angle)
-        heptagonPoints += `${x},${y} `
-      }
-      heptagon.setAttribute("points", heptagonPoints.trim())
-
-      // 设置填充色
-      setBackground(element, heptagon)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        heptagon.setAttribute("stroke", element.borderColor || "#000")
-        heptagon.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            heptagon.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            heptagon.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            heptagon.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(heptagon)
-      break
-    case "hexagon":
-      const hexagon = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      hexagon.setAttribute(
-        "points",
-        `${element.width * 0.25},0 ${element.width * 0.75},0 ${element.width},${
-          element.height * 0.5
-        } ` +
-          `${element.width * 0.75},${element.height} ${element.width * 0.25},${
-            element.height
-          } 0,${element.height * 0.5}`
-      )
-
-      // 设置填充色
-      setBackground(element, hexagon)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        hexagon.setAttribute("stroke", element.borderColor || "#000")
-        hexagon.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            hexagon.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            hexagon.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            hexagon.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(hexagon)
-      break
-
-    case "octagon":
-      const octagon = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      octagon.setAttribute(
-        "points",
-        `${element.width * 0.3},0 ${element.width * 0.7},0 ${element.width},${
-          element.height * 0.3
-        } ` +
-          `${element.width},${element.height * 0.7} ${element.width * 0.7},${
-            element.height
-          } ` +
-          `${element.width * 0.3},${element.height} 0,${
-            element.height * 0.7
-          } 0,${element.height * 0.3}`
-      )
-
-      // 设置填充色
-      setBackground(element, octagon)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        octagon.setAttribute("stroke", element.borderColor || "#000")
-        octagon.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            octagon.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            octagon.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            octagon.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(octagon)
-      break
-
-    case "trapezoid":
-      const trapezoid = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      trapezoid.setAttribute(
-        "points",
-        `${element.width * 0.2},0 ${element.width * 0.8},0 ${element.width},${
-          element.height
-        } 0,${element.height}`
-      )
-
-      // 设置填充色
-      setBackground(element, trapezoid)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        trapezoid.setAttribute("stroke", element.borderColor || "#000")
-        trapezoid.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            trapezoid.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            trapezoid.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            trapezoid.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(trapezoid)
-      break
-
-    case "diamond":
-      const diamond = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      diamond.setAttribute(
-        "points",
-        `${element.width / 2},0 ${element.width},${element.height / 2} ${
-          element.width / 2
-        },${element.height} 0,${element.height / 2}`
-      )
-
-      // 设置填充色
-      setBackground(element, diamond)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        diamond.setAttribute("stroke", element.borderColor || "#000")
-        diamond.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            diamond.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            diamond.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            diamond.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(diamond)
-      break
-    case "dodecagon":
-      const dodecagon = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-
-      // 计算十二边形的顶点
-      let dodecagonPoints = ""
-      for (let i = 0; i < 12; i++) {
-        const angle = (i * 2 * Math.PI) / 12 - Math.PI / 2 // 从顶部开始
-        const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
-        const y = element.height / 2 + (element.height / 2) * Math.sin(angle)
-        dodecagonPoints += `${x},${y} `
-      }
-      dodecagon.setAttribute("points", dodecagonPoints.trim())
-
-      // 设置填充色
-      setBackground(element, dodecagon)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        dodecagon.setAttribute("stroke", element.borderColor || "#000")
-        dodecagon.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            dodecagon.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            dodecagon.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            dodecagon.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(dodecagon)
-      break
-    case "halfFrame":
-      // 创建外框和内框
-      const outerRect2 = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      const innerRect2 = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 计算内框的边距
-      const frameWidth2 = element.width / 9
-
-      // 绘制外框的左边和上边
-      outerRect2.setAttribute(
-        "d",
-        `M0,${element.height} L0,0 L${element.width},0`
-      )
-
-      // 绘制内框的左边和上边，注意起点位置调整
-      innerRect2.setAttribute(
-        "d",
-        `M${frameWidth2},${element.height - frameWidth2} ` +
-          `L${frameWidth2},${frameWidth2} ` +
-          `L${element.width - frameWidth2},${frameWidth2}`
-      )
-
-      // 设置填充色
-      if (element.fill && element.fill.type === "color") {
-        // 创建一个填充用的路径
-        const fillPath = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "path"
-        )
-        fillPath.setAttribute(
-          "d",
-          `M${frameWidth2},${frameWidth2} ` +
-            `L${element.width - frameWidth2},${frameWidth2} ` +
-            `L${element.width},0 ` +
-            `L0,0 ` +
-            `L0,${element.height} ` +
-            `L${frameWidth2},${element.height - frameWidth2} Z`
-        )
-        fillPath.setAttribute("fill", element.fill.value || "transparent")
-        svg.appendChild(fillPath)
-
-        outerRect2.setAttribute("fill", "none")
-        innerRect2.setAttribute("fill", "none")
-      } else {
-        outerRect2.setAttribute("fill", "none")
-        innerRect2.setAttribute("fill", "none")
-      }
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        const borderColor = element.borderColor || "#000"
-        const borderWidth = element.borderWidth || 1
-
-        outerRect2.setAttribute("stroke", borderColor)
-        outerRect2.setAttribute("stroke-width", borderWidth)
-        innerRect2.setAttribute("stroke", borderColor)
-        innerRect2.setAttribute("stroke-width", borderWidth)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            const dashArray = element.borderStrokeDasharray
-            outerRect2.setAttribute("stroke-dasharray", dashArray)
-            innerRect2.setAttribute("stroke-dasharray", dashArray)
-          } else if (element.borderType === "dotted") {
-            outerRect2.setAttribute("stroke-dasharray", "1, 3")
-            innerRect2.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            outerRect2.setAttribute("stroke-dasharray", "5, 5")
-            innerRect2.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(outerRect2)
-      svg.appendChild(innerRect2)
-      break
-    case "corner":
-      const corner = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      corner.setAttribute(
-        "d",
-        `M0,0 ` +
-          `L0,${element.height} ` +
-          `L${element.width},${element.height} ` +
-          `L${element.width},${element.height * 0.6} ` +
-          `L${element.width * 0.4},${element.height * 0.6} ` +
-          `L${element.width * 0.4},0 Z`
-      )
-
-      // 设置填充色
-      setBackground(element, corner)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        corner.setAttribute("stroke", element.borderColor || "#000")
-        corner.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            corner.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            corner.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            corner.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(corner)
-      break
-    case "diagStripe":
-      const diagStripe = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 绘制斜纹路径
-      diagStripe.setAttribute(
-        "d",
-        `M${element.width * 0.4},0 ` +
-          `L${element.width},0 ` +
-          `L0,${element.height} ` +
-          `L0,${element.height * 0.4} Z`
-      )
-
-      // 设置填充色
-      setBackground(element, diagStripe)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        diagStripe.setAttribute("stroke", element.borderColor || "#000")
-        diagStripe.setAttribute("stroke-width", element.borderWidth || 1)
-        diagStripe.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            diagStripe.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            diagStripe.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            diagStripe.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(diagStripe)
-      break
-    case "plus":
-      const plus = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      plus.setAttribute(
-        "points",
-        `${element.width * 0.4},0 ` +
-          `${element.width * 0.6},0 ` +
-          `${element.width * 0.6},${element.height * 0.4} ` +
-          `${element.width},${element.height * 0.4} ` +
-          `${element.width},${element.height * 0.6} ` +
-          `${element.width * 0.6},${element.height * 0.6} ` +
-          `${element.width * 0.6},${element.height} ` +
-          `${element.width * 0.4},${element.height} ` +
-          `${element.width * 0.4},${element.height * 0.6} ` +
-          `0,${element.height * 0.6} ` +
-          `0,${element.height * 0.4} ` +
-          `${element.width * 0.4},${element.height * 0.4}`
-      )
-
-      // 设置填充色
-      setBackground(element, plus)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        plus.setAttribute("stroke", element.borderColor || "#000")
-        plus.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            plus.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
-          } else if (element.borderType === "dotted") {
-            plus.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            plus.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(plus)
-      break
-    case "can":
-      const can = document.createElementNS("http://www.w3.org/2000/svg", "g")
-
-      // 创建圆柱体的主体部分
-      const cylinderBody = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      cylinderBody.setAttribute(
-        "d",
-        `M0,${element.height * 0.15} ` +
-          `A${element.width / 2},${element.height * 0.15} 0 0 1 ${
-            element.width
-          },${element.height * 0.15} ` +
-          `V${element.height * 0.85} ` +
-          `A${element.width / 2},${element.height * 0.15} 0 0 1 0,${
-            element.height * 0.85
-          } Z`
-      )
-
-      // 创建顶部椭圆
-      const topEllipse = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "ellipse"
-      )
-      topEllipse.setAttribute("cx", element.width / 2)
-      topEllipse.setAttribute("cy", element.height * 0.15)
-      topEllipse.setAttribute("rx", element.width / 2)
-      topEllipse.setAttribute("ry", element.height * 0.15)
-
-      // 设置填充色
-      setBackground(element, cylinderBody)
-      setBackground(element, topEllipse)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        const borderColor = element.borderColor || "#000"
-        const borderWidth = element.borderWidth || 1
-
-        cylinderBody.setAttribute("stroke", borderColor)
-        cylinderBody.setAttribute("stroke-width", borderWidth)
-        topEllipse.setAttribute("stroke", borderColor)
-        topEllipse.setAttribute("stroke-width", borderWidth)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            const dashArray = element.borderStrokeDasharray
-            cylinderBody.setAttribute("stroke-dasharray", dashArray)
-            topEllipse.setAttribute("stroke-dasharray", dashArray)
-          } else if (element.borderType === "dotted") {
-            cylinderBody.setAttribute("stroke-dasharray", "1, 3")
-            topEllipse.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            cylinderBody.setAttribute("stroke-dasharray", "5, 5")
-            topEllipse.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      can.appendChild(cylinderBody)
-      can.appendChild(topEllipse)
-      svg.appendChild(can)
-      break
-    case "cube":
-      const cube = document.createElementNS("http://www.w3.org/2000/svg", "g")
-
-      // 计算关键点坐标
-      const offset = element.width * 0.2
-      const frontX = offset
-      const frontY = offset
-      const frontW = element.width - offset
-      const frontH = element.height
-
-      // 设置立方体的三个面的路径
-      const frontFace = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      frontFace.setAttribute(
-        "d",
-        `M${frontX},${frontY} ` +
-          `L${frontW},${frontY} ` +
-          `L${frontW},${frontH} ` +
-          `L${frontX},${frontH} Z`
-      )
-
-      const rightFace = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      rightFace.setAttribute(
-        "d",
-        `M${frontW},${frontY} ` +
-          `L${element.width},0 ` +
-          `L${element.width},${element.height - offset} ` +
-          `L${frontW},${frontH} Z`
-      )
-
-      const topFace = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      topFace.setAttribute(
-        "d",
-        `M${frontX},${frontY} ` +
-          `L${frontW - offset - frontX},0 ` + // 修改这里：改为从(0,0)开始
-          `L${element.width - offset},0 ` + // 修改这里：使用 offset 来计算右上角的位置
-          `L${element.width},0 ` +
-          `L${frontW},${frontY} Z`
-      )
-
-      // 设置填充色
-      if (element.fill && element.fill.type === "color") {
-        const fillColor = element.fill.value || "transparent"
-        frontFace.setAttribute("fill", fillColor)
-        rightFace.setAttribute("fill", this.adjustBrightness(fillColor, 0.8))
-        topFace.setAttribute("fill", this.adjustBrightness(fillColor, 1.2))
-      } else {
-        frontFace.setAttribute("fill", "transparent")
-        rightFace.setAttribute("fill", "transparent")
-        topFace.setAttribute("fill", "transparent")
-      }
-      // 设置边框
-      if (element.borderWidth > 0) {
-        const borderColor = element.borderColor || "#000"
-        const borderWidth = element.borderWidth || 1
-
-        frontFace.setAttribute("stroke", borderColor)
-        frontFace.setAttribute("stroke-width", borderWidth)
-        rightFace.setAttribute("stroke", borderColor)
-        rightFace.setAttribute("stroke-width", borderWidth)
-        topFace.setAttribute("stroke", borderColor)
-        topFace.setAttribute("stroke-width", borderWidth)
-
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          const dashArray =
-            element.borderStrokeDasharray ||
-            (element.borderType === "dotted" ? "1, 3" : "5, 5")
-          frontFace.setAttribute("stroke-dasharray", dashArray)
-          rightFace.setAttribute("stroke-dasharray", dashArray)
-          topFace.setAttribute("stroke-dasharray", dashArray)
-        }
-      }
-
-      // 按正确的顺序添加面（从后到前）
-      cube.appendChild(rightFace)
-      cube.appendChild(topFace)
-      cube.appendChild(frontFace)
-      svg.appendChild(cube)
-      break
-    case "bevel":
-      const bevel = document.createElementNS("http://www.w3.org/2000/svg", "g")
-
-      // 计算关键点坐标
-      const bevelOffset = element.width * 0.2
-      const smallRectX = bevelOffset
-      const smallRectY = bevelOffset
-      const smallRectW = element.width - 2 * bevelOffset
-      const smallRectH = element.height - 2 * bevelOffset
-
-      // 绘制顶部小矩形
-      const topRect = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "rect"
-      )
-      topRect.setAttribute("x", smallRectX)
-      topRect.setAttribute("y", smallRectY)
-      topRect.setAttribute("width", smallRectW)
-      topRect.setAttribute("height", smallRectH)
-
-      // 绘制四个梯形
-      const topTrapezoid = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      topTrapezoid.setAttribute(
-        "d",
-        `M0,0 L${element.width},0 L${
-          element.width - bevelOffset
-        },${bevelOffset} L${bevelOffset},${bevelOffset} Z`
-      )
-
-      const bottomTrapezoid = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      bottomTrapezoid.setAttribute(
-        "d",
-        `M${bevelOffset},${element.height - bevelOffset} L${
-          element.width - bevelOffset
-        },${element.height - bevelOffset} L${element.width},${
-          element.height
-        } L0,${element.height} Z`
-      )
-
-      const leftTrapezoid = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      leftTrapezoid.setAttribute(
-        "d",
-        `M0,0 L${bevelOffset},${bevelOffset} L${bevelOffset},${
-          element.height - bevelOffset
-        } L0,${element.height} Z`
-      )
-
-      const rightTrapezoid = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      rightTrapezoid.setAttribute(
-        "d",
-        `M${element.width},0 L${element.width},${element.height} L${
-          element.width - bevelOffset
-        },${element.height - bevelOffset} L${
-          element.width - bevelOffset
-        },${bevelOffset} Z`
-      )
-
-      // 设置填充色
-      if (element.fill && element.fill.type === "color") {
-        const fillColor = element.fill.value || "transparent"
-        topRect.setAttribute("fill", fillColor)
-        topTrapezoid.setAttribute("fill", this.adjustBrightness(fillColor, 1.2))
-        bottomTrapezoid.setAttribute(
-          "fill",
-          this.adjustBrightness(fillColor, 0.8)
-        )
-        leftTrapezoid.setAttribute(
-          "fill",
-          this.adjustBrightness(fillColor, 0.9)
-        )
-        rightTrapezoid.setAttribute(
-          "fill",
-          this.adjustBrightness(fillColor, 0.7)
-        )
-      } else {
-        topRect.setAttribute("fill", "transparent")
-        topTrapezoid.setAttribute("fill", "transparent")
-        bottomTrapezoid.setAttribute("fill", "transparent")
-        leftTrapezoid.setAttribute("fill", "transparent")
-        rightTrapezoid.setAttribute("fill", "transparent")
-      }
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        const borderColor = element.borderColor || "#000"
-        const borderWidth = element.borderWidth || 1
-        const parts = [
-          topRect,
-          topTrapezoid,
-          bottomTrapezoid,
-          leftTrapezoid,
-          rightTrapezoid,
-        ]
-
-        parts.forEach((part) => {
-          part.setAttribute("stroke", borderColor)
-          part.setAttribute("stroke-width", borderWidth)
-
-          if (
-            element.borderType === "dotted" ||
-            element.borderType === "dashed"
-          ) {
-            const dashArray =
-              element.borderStrokeDasharray ||
-              (element.borderType === "dotted" ? "1, 3" : "5, 5")
-            part.setAttribute("stroke-dasharray", dashArray)
-          }
-        })
-      }
-
-      // 按正确的顺序添加面（从后到前）
-      bevel.appendChild(bottomTrapezoid)
-      bevel.appendChild(leftTrapezoid)
-      bevel.appendChild(rightTrapezoid)
-      bevel.appendChild(topTrapezoid)
-      bevel.appendChild(topRect)
-      svg.appendChild(bevel)
-      break
-    case "donut":
-      const donut = document.createElementNS("http://www.w3.org/2000/svg", "g")
-
-      // 外圆
-      const outerCircle = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "circle"
-      )
-      outerCircle.setAttribute("cx", element.width / 2)
-      outerCircle.setAttribute("cy", element.height / 2)
-      outerCircle.setAttribute("r", Math.min(element.width, element.height) / 2)
-
-      // 内圆
-      const innerCircle = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "circle"
-      )
-      innerCircle.setAttribute("cx", element.width / 2)
-      innerCircle.setAttribute("cy", element.height / 2)
-      innerCircle.setAttribute("r", Math.min(element.width, element.height) / 4)
-
-      // 设置填充色
-      setBackground(element, outerCircle)
-      innerCircle.setAttribute("fill", "white")
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        const borderColor = element.borderColor || "#000"
-        const borderWidth = element.borderWidth || 1
-
-        outerCircle.setAttribute("stroke", borderColor)
-        outerCircle.setAttribute("stroke-width", borderWidth)
-        innerCircle.setAttribute("stroke", borderColor)
-        innerCircle.setAttribute("stroke-width", borderWidth)
-
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          const dashArray =
-            element.borderStrokeDasharray ||
-            (element.borderType === "dotted" ? "1, 3" : "5, 5")
-          outerCircle.setAttribute("stroke-dasharray", dashArray)
-          innerCircle.setAttribute("stroke-dasharray", dashArray)
-        }
-      }
-
-      donut.appendChild(outerCircle)
-      donut.appendChild(innerCircle)
-      svg.appendChild(donut)
-      break
-    case "noSmoking":
-      const noSmoking = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "g"
-      )
-
-      // 创建路径
-      const path = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      path.setAttribute(
-        "d",
-        "M0,70 A77,70 0 1,1 0,71 Z M123.80284467265982,99.39738105155146 A57.5386,50.5386 0 0 0 45.160427644134444,27.90427466198293 Z M30.197155327340184,40.602618948448544 A57.5386,50.5386 0 0 0 108.83957235586556,112.09572533801708 Z"
-      )
-      path.setAttribute("fill", "rgba(255,217,102,1)")
-      path.setAttribute("stroke", "rgba(23,44,81,1)")
-      path.setAttribute("stroke-width", "1px")
-      path.setAttribute("stroke-dasharray", "")
-      path.setAttribute("stroke-linecap", "butt")
-      path.setAttribute("stroke-linejoin", "round")
-
-      noSmoking.appendChild(path)
-      svg.appendChild(noSmoking)
-      break
-    case "rightArrow":
-      const rightArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      rightArrow.setAttribute(
-        "points",
-        `0,${element.height * 0.3} ${element.width * 0.7},${
-          element.height * 0.3
-        } ` +
-          `${element.width * 0.7},0 ${element.width},${element.height * 0.5} ` +
-          `${element.width * 0.7},${element.height} ${element.width * 0.7},${
-            element.height * 0.7
-          } ` +
-          `0,${element.height * 0.7}`
-      )
-
-      // 设置填充色
-      setBackground(element, rightArrow)
-      // 设置边框
-      if (element.borderWidth > 0) {
-        rightArrow.setAttribute("stroke", element.borderColor || "#000")
-        rightArrow.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            rightArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            rightArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            rightArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(rightArrow)
-      break
-    case "leftArrow":
-      const leftArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      leftArrow.setAttribute(
-        "points",
-        `${element.width},${element.height * 0.3} ${element.width * 0.3},${
-          element.height * 0.3
-        } ` +
-          `${element.width * 0.3},0 0,${element.height * 0.5} ` +
-          `${element.width * 0.3},${element.height} ${element.width * 0.3},${
-            element.height * 0.7
-          } ` +
-          `${element.width},${element.height * 0.7}`
-      )
-
-      // 设置填充色
-      setBackground(element, leftArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        leftArrow.setAttribute("stroke", element.borderColor || "#000")
-        leftArrow.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            leftArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            leftArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            leftArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(leftArrow)
-      break
-    case "upArrow":
-      const upArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      upArrow.setAttribute(
-        "points",
-        `${element.width * 0.3},${element.height} ${element.width * 0.3},${
-          element.height * 0.3
-        } ` +
-          `0,${element.height * 0.3} ${element.width * 0.5},0 ` +
-          `${element.width},${element.height * 0.3} ${element.width * 0.7},${
-            element.height * 0.3
-          } ` +
-          `${element.width * 0.7},${element.height}`
-      )
-
-      // 设置填充色
-      setBackground(element, upArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        upArrow.setAttribute("stroke", element.borderColor || "#000")
-        upArrow.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            upArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            upArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            upArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(upArrow)
-      break
-    case "downArrow":
-      const downArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      downArrow.setAttribute(
-        "points",
-        `${element.width * 0.3},0 ${element.width * 0.3},${
-          element.height * 0.7
-        } ` +
-          `0,${element.height * 0.7} ${element.width * 0.5},${
-            element.height
-          } ` +
-          `${element.width},${element.height * 0.7} ${element.width * 0.7},${
-            element.height * 0.7
-          } ` +
-          `${element.width * 0.7},0`
-      )
-
-      // 设置填充色
-      setBackground(element, downArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        downArrow.setAttribute("stroke", element.borderColor || "#000")
-        downArrow.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            downArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            downArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            downArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(downArrow)
-      break
-    case "leftRightArrow":
-      const leftRightArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      leftRightArrow.setAttribute(
-        "points",
-        `0,${element.height * 0.5} ${element.width * 0.2},${
-          element.height * 0.2
-        } ` +
-          `${element.width * 0.2},${element.height * 0.4} ${
-            element.width * 0.8
-          },${element.height * 0.4} ` +
-          `${element.width * 0.8},${element.height * 0.2} ${element.width},${
-            element.height * 0.5
-          } ` +
-          `${element.width * 0.8},${element.height * 0.8} ${
-            element.width * 0.8
-          },${element.height * 0.6} ` +
-          `${element.width * 0.2},${element.height * 0.6} ${
-            element.width * 0.2
-          },${element.height * 0.8}`
-      )
-
-      // 设置填充色
-      setBackground(element, leftRightArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        leftRightArrow.setAttribute("stroke", element.borderColor || "#000")
-        leftRightArrow.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            leftRightArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            leftRightArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            leftRightArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(leftRightArrow)
-      break
-    case "upDownArrow":
-      const upDownArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      upDownArrow.setAttribute(
-        "points",
-        `${element.width * 0.5},0 ${element.width * 0.3},${
-          element.height * 0.2
-        } ` +
-          `${element.width * 0.4},${element.height * 0.2} ${
-            element.width * 0.4
-          },${element.height * 0.8} ` +
-          `${element.width * 0.3},${element.height * 0.8} ${
-            element.width * 0.5
-          },${element.height} ` +
-          `${element.width * 0.7},${element.height * 0.8} ${
-            element.width * 0.6
-          },${element.height * 0.8} ` +
-          `${element.width * 0.6},${element.height * 0.2} ${
-            element.width * 0.7
-          },${element.height * 0.2}`
-      )
-
-      // 设置填充色
-      setBackground(element, upDownArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        upDownArrow.setAttribute("stroke", element.borderColor || "#000")
-        upDownArrow.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            upDownArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            upDownArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            upDownArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(upDownArrow)
-      break
-    case "quadArrow":
-      const quadArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 计算缩放比例
-      const scale = Math.min(element.width / 167, element.height / 121)
-      const offsetX = (element.width - 167 * scale) / 2
-      const offsetY = (element.height - 121 * scale) / 2
-
-      // 构建路径数据
-      const pathData = `
-            M${offsetX},${60.5 * scale + offsetY}
-            L${27.225 * scale + offsetX},${33.275 * scale + offsetY}
-            L${27.225 * scale + offsetX},${46.8875 * scale + offsetY}
-            L${69.8875 * scale + offsetX},${46.8875 * scale + offsetY}
-            L${69.8875 * scale + offsetX},${27.225 * scale + offsetY}
-            L${56.275 * scale + offsetX},${27.225 * scale + offsetY}
-            L${83.5 * scale + offsetX},${offsetY}
-            L${110.725 * scale + offsetX},${27.225 * scale + offsetY}
-            L${97.1125 * scale + offsetX},${27.225 * scale + offsetY}
-            L${97.1125 * scale + offsetX},${46.8875 * scale + offsetY}
-            L${139.775 * scale + offsetX},${46.8875 * scale + offsetY}
-            L${139.775 * scale + offsetX},${33.275 * scale + offsetY}
-            L${167 * scale + offsetX},${60.5 * scale + offsetY}
-            L${139.775 * scale + offsetX},${87.725 * scale + offsetY}
-            L${139.775 * scale + offsetX},${74.1125 * scale + offsetY}
-            L${97.1125 * scale + offsetX},${74.1125 * scale + offsetY}
-            L${97.1125 * scale + offsetX},${93.775 * scale + offsetY}
-            L${110.725 * scale + offsetX},${93.775 * scale + offsetY}
-            L${83.5 * scale + offsetX},${121 * scale + offsetY}
-            L${56.275 * scale + offsetX},${93.775 * scale + offsetY}
-            L${69.8875 * scale + offsetX},${93.775 * scale + offsetY}
-            L${69.8875 * scale + offsetX},${74.1125 * scale + offsetY}
-            L${27.225 * scale + offsetX},${74.1125 * scale + offsetY}
-            L${27.225 * scale + offsetX},${87.725 * scale + offsetY}
-            Z`
-
-      quadArrow.setAttribute("d", pathData)
-
-      // 设置填充色
-      setBackground(element, quadArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        quadArrow.setAttribute("stroke", element.borderColor || "#000")
-        quadArrow.setAttribute("stroke-width", element.borderWidth || 1)
-        quadArrow.setAttribute("stroke-linecap", "butt")
-        quadArrow.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            quadArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            quadArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            quadArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(quadArrow)
-      break
-    case "leftRightUpArrow":
-      const leftRightUpArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 计算缩放比例
-      const scale2 = Math.min(element.width / 167, element.height / 121)
-      const offsetX2 = (element.width - 167 * scale2) / 2
-      const offsetY2 = (element.height - 121 * scale2) / 2
-
-      // 构建路径数据
-      const pathData2 = `
-            M${offsetX2},${60.5 * scale2 + offsetY2}
-            L${27.225 * scale2 + offsetX2},${33.275 * scale2 + offsetY2}
-            L${27.225 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
-            L${69.8875 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
-            L${69.8875 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
-            L${56.275 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
-            L${83.5 * scale2 + offsetX2},${offsetY2}
-            L${110.725 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
-            L${97.1125 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
-            L${97.1125 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
-            L${139.775 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
-            L${139.775 * scale2 + offsetX2},${33.275 * scale2 + offsetY2}
-            L${167 * scale2 + offsetX2},${60.5 * scale2 + offsetY2}
-            L${139.775 * scale2 + offsetX2},${87.725 * scale2 + offsetY2}
-            L${139.775 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
-            L${97.1125 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
-            L${69.8875 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
-            L${27.225 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
-            L${27.225 * scale2 + offsetX2},${87.725 * scale2 + offsetY2}
-            Z`
-
-      leftRightUpArrow.setAttribute("d", pathData2)
-
-      // 设置填充色
-      setBackground(element, leftRightUpArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        leftRightUpArrow.setAttribute("stroke", element.borderColor || "#000")
-        leftRightUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
-        leftRightUpArrow.setAttribute("stroke-linecap", "butt")
-        leftRightUpArrow.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            leftRightUpArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            leftRightUpArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            leftRightUpArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(leftRightUpArrow)
-      break
-    case "bentArrow":
-      const bentArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 构建路径数据
-      const pathData3 = `
-            M0,${element.height * 0.88}
-            L0,${element.height * 0.495}
-            A${element.width * 0.385} ${element.height * 0.385} 0 0 1 ${
-        element.width * 0.385
-      } ${element.height * 0.11}
-            L${element.width * 0.67},${element.height * 0.11}
-            L${element.width * 0.67},0
-            L${element.width * 0.89},${element.height * 0.22}
-            L${element.width * 0.67},${element.height * 0.44}
-            L${element.width * 0.67},${element.height * 0.33}
-            L${element.width * 0.385},${element.height * 0.33}
-            A${element.width * 0.165} ${element.height * 0.165} 0 0 0 ${
-        element.width * 0.22
-      } ${element.height * 0.495}
-            L${element.width * 0.22},${element.height * 0.88}
-            Z`
-
-      bentArrow.setAttribute("d", pathData3)
-
-      // 设置填充色
-      setBackground(element, bentArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        bentArrow.setAttribute("stroke", element.borderColor || "#000")
-        bentArrow.setAttribute("stroke-width", element.borderWidth || 1)
-        bentArrow.setAttribute("stroke-linecap", "butt")
-        bentArrow.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            bentArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            bentArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            bentArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(bentArrow)
-      break
-    case "parallelogram":
-      const parallelogram = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      parallelogram.setAttribute(
-        "points",
-        `${element.width * 0.25},0 ${element.width},0 ${element.width * 0.75},${
-          element.height
-        } 0,${element.height}`
-      )
-
-      // 设置填充色
-      setBackground(element, parallelogram)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        parallelogram.setAttribute("stroke", element.borderColor || "#000")
-        parallelogram.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            parallelogram.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            parallelogram.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            parallelogram.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(parallelogram)
-      break
-    case "uturnArrow":
-      const uturnArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 构建路径数据
-      const pathDataUturn = `
-            M0,${element.height * 0.745}
-            L0,${element.height * 0.179375}
-            A${element.width * 0.179375} ${element.height * 0.179375} 0 0 1 ${
-        element.width * 0.179375
-      },0
-            L${element.width * 0.179375},0
-            A${element.width * 0.179375} ${element.height * 0.179375} 0 0 1 ${
-        element.width * 0.359375
-      },${element.height * 0.179375}
-            L${element.width * 0.359375},${element.height * 0.205}
-            L${element.width * 0.41},${element.height * 0.205}
-            L${element.width * 0.3075},${element.height * 0.3075}
-            L${element.width * 0.205},${element.height * 0.205}
-            L${element.width * 0.25625},${element.height * 0.205}
-            L${element.width * 0.25625},${element.height * 0.179375}
-            A${element.width * 0.076875} ${element.height * 0.076875} 0 0 0 ${
-        element.width * 0.179375
-      },${element.height * 0.1025}
-            L${element.width * 0.179375},${element.height * 0.1025}
-            A${element.width * 0.076875} ${element.height * 0.076875} 0 0 0 ${
-        element.width * 0.1025
-      },${element.height * 0.179375}
-            L${element.width * 0.1025},${element.height * 0.745}
-            Z`
-
-      uturnArrow.setAttribute("d", pathDataUturn)
-
-      // 设置填充色
-      setBackground(element, uturnArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        uturnArrow.setAttribute("stroke", element.borderColor || "#000")
-        uturnArrow.setAttribute("stroke-width", element.borderWidth || 1)
-        uturnArrow.setAttribute("stroke-linecap", "butt")
-        uturnArrow.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            uturnArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            uturnArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            uturnArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(uturnArrow)
-      break
-    case "leftUpArrow":
-      const leftUpArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 使用提供的路径数据
-      const pathDataLeftUp = `
-            M0,${element.height * 0.65}
-            L${element.width * 0.15},${element.height * 0.4}
-            L${element.width * 0.15},${element.height * 0.55}
-            L${element.width * 0.5},${element.height * 0.55}
-            L${element.width * 0.5},${element.height * 0.1}
-            L${element.width * 0.35},${element.height * 0.1}
-            L${element.width * 0.65},0
-            L${element.width * 0.85},${element.height * 0.1}
-            L${element.width * 0.75},${element.height * 0.1}
-            L${element.width * 0.75},${element.height * 0.85}
-            L${element.width * 0.15},${element.height * 0.85}
-            L${element.width * 0.15},${element.height * 1}
-            Z`
-
-      leftUpArrow.setAttribute("d", pathDataLeftUp)
-
-      // 设置填充色
-      setBackground(element, leftUpArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        leftUpArrow.setAttribute("stroke", element.borderColor || "#000")
-        leftUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
-        leftUpArrow.setAttribute("stroke-linecap", "butt")
-        leftUpArrow.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            leftUpArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            leftUpArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            leftUpArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(leftUpArrow)
-      break
-    case "bentUpArrow":
-      const bentUpArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 构建路径数据，去掉左侧箭头
-      // 使用提供的路径数据
-      const pathDataBentUp = `
-            M0,${element.height * 0.89}
-            L0,${element.height * 0.7}
-            L${element.width * 0.575},${element.height * 0.7}
-            L${element.width * 0.575},${element.height * 0.2}
-            L${element.width * 0.46},${element.height * 0.2}
-            L${element.width * 0.69},0
-            L${element.width * 0.92},${element.height * 0.2}
-            L${element.width * 0.805},${element.height * 0.2}
-            L${element.width * 0.805},${element.height * 0.89}
-            Z`
-
-      bentUpArrow.setAttribute("d", pathDataBentUp)
-
-      // 设置填充色
-      setBackground(element, bentUpArrow)
-      // 设置边框
-      if (element.borderWidth > 0) {
-        bentUpArrow.setAttribute("stroke", element.borderColor || "#000")
-        bentUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
-        bentUpArrow.setAttribute("stroke-linecap", "butt")
-        bentUpArrow.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            bentUpArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            bentUpArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            bentUpArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(bentUpArrow)
-      break
-    case "curvedRightArrow":
-      const curvedRightArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 使用提供的路径数据
-      const pathDataCurvedRight = `
-            M${element.width},0
-            A${element.width} ${element.height * 0.4} 0 0 0 0 ${
-        element.height * 0.4
-      }
-            L0,${element.height * 0.5}
-            A${element.width} ${element.height * 0.4} 0 0 1 ${element.width} ${
-        element.height * 0.15
-      }
-            Z
-            M0,${element.height * 0.4}
-            A${element.width} ${element.height * 0.4} 0 0 0 ${
-        element.width * 0.8
-      } ${element.height * 0.8}
-            L${element.width * 0.8},${element.height * 0.75}
-            L${element.width},${element.height * 0.875}
-            L${element.width * 0.8},${element.height * 1}
-            L${element.width * 0.8},${element.height * 0.95}
-            A${element.width} ${element.height * 0.4} 0 0 1 0 ${
-        element.height * 0.5
-      }
-            Z`
-
-      curvedRightArrow.setAttribute("d", pathDataCurvedRight)
-
-      // 设置填充色
-      setBackground(element, curvedRightArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        curvedRightArrow.setAttribute("stroke", element.borderColor || "#000")
-        curvedRightArrow.setAttribute("stroke-width", element.borderWidth || 1)
-        curvedRightArrow.setAttribute("stroke-linecap", "butt")
-        curvedRightArrow.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            curvedRightArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            curvedRightArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            curvedRightArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(curvedRightArrow)
-      break
-    case "curvedLeftArrow":
-      const curvedLeftArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 定义左弧形箭头的路径数据
-      const pathDataCurvedLeft = `
-            M0,0
-            A${element.width} ${element.height * 0.4} 0 0 1 ${element.width} ${
-        element.height * 0.4
-      }
-            L${element.width},${element.height * 0.55}
-            A${element.width} ${element.height * 0.4} 0 0 0 0 ${
-        element.height * 0.15
-      }
-            Z
-            M0,${element.height * 0.85}
-            L${element.width * 0.25},${element.height * 0.65}
-            L${element.width * 0.25},${element.height * 0.75}
-            A${element.width} ${element.height * 0.4} 0 0 0 ${element.width} ${
-        element.height * 0.4
-      }
-            L${element.width},${element.height * 0.5}
-            L${element.width},${element.height * 0.5}
-            A${element.width} ${element.height * 0.4} 0 0 1 ${
-        element.width * 0.25
-      } ${element.height * 0.9}
-            L${element.width * 0.25},${element.height}
-            Z`
-
-      curvedLeftArrow.setAttribute("d", pathDataCurvedLeft)
-
-      // 设置填充色
-      setBackground(element, curvedLeftArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        curvedLeftArrow.setAttribute("stroke", element.borderColor || "#000")
-        curvedLeftArrow.setAttribute("stroke-width", element.borderWidth || 1)
-        curvedLeftArrow.setAttribute("stroke-linecap", "butt")
-        curvedLeftArrow.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            curvedLeftArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            curvedLeftArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            curvedLeftArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(curvedLeftArrow)
-      break
-    case "curvedUpArrow":
-      const curvedUpArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 定义上弧形箭头的路径数据
-      const pathDataCurvedUp = `
-            M${element.width * 0.905},0
-            L${element.width * 0.81},${element.height * 0.25}
-            L${element.width * 0.857},${element.height * 0.25}
-            A${element.width * 0.428} ${element.height} 0 0 1 ${
-        element.width * 0.428
-      },${element.height}
-            L${element.width * 0.522},${element.height}
-            A${element.width * 0.428} ${element.height} 0 0 0 ${
-        element.width * 0.952
-      },${element.height * 0.25}
-            L${element.width},${element.height * 0.25}
-            Z
-            M${element.width * 0.094},0
-            L0,0
-            A${element.width * 0.428} ${element.height} 0 0 0 ${
-        element.width * 0.428
-      },${element.height}
-            L${element.width * 0.522},${element.height}
-            A${element.width * 0.428} ${element.height} 0 0 1 ${
-        element.width * 0.094
-      },0
-            Z`
-
-      curvedUpArrow.setAttribute("d", pathDataCurvedUp)
-
-      // 设置填充色
-      setBackground(element, curvedUpArrow)
-      // 设置边框
-      if (element.borderWidth > 0) {
-        curvedUpArrow.setAttribute("stroke", element.borderColor || "#000")
-        curvedUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
-        curvedUpArrow.setAttribute("stroke-linecap", "butt")
-        curvedUpArrow.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            curvedUpArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            curvedUpArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            curvedUpArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(curvedUpArrow)
-      break
-    case "curvedDownArrow":
-      const curvedDownArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 定义下弧形箭头的路径数据
-      const pathDataCurvedDown = `
-            M0,${element.height}
-            L${element.width * 0.16},${element.height}
-            A${element.width * 0.46} ${element.height} 0 0 1 ${
-        element.width * 0.62
-      },0
-            L${element.width * 0.46},0
-            A${element.width * 0.46} ${element.height} 0 0 0 0,${element.height}
-            Z
-            M${element.width},${element.height}
-            L${element.width * 0.84},${element.height * 0.75}
-            L${element.width * 0.92},${element.height * 0.75}
-            A${element.width * 0.46} ${element.height} 0 0 0 ${
-        element.width * 0.46
-      },0
-            L${element.width * 0.62},0
-            A${element.width * 0.46} ${element.height} 0 0 1 ${
-        element.width * 1.08
-      },${element.height * 0.75}
-            L${element.width * 1.16},${element.height * 0.75}
-            Z`
-
-      curvedDownArrow.setAttribute("d", pathDataCurvedDown)
-
-      // 设置填充色
-      setBackground(element, curvedDownArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        curvedDownArrow.setAttribute("stroke", element.borderColor || "#000")
-        curvedDownArrow.setAttribute("stroke-width", element.borderWidth || 1)
-        curvedDownArrow.setAttribute("stroke-linecap", "butt")
-        curvedDownArrow.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            curvedDownArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            curvedDownArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            curvedDownArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(curvedDownArrow)
-      break
-    case "stripedRightArrow":
-      const stripedRightArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "g"
-      )
-
-      // 主箭头部分
-      const mainArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      mainArrow.setAttribute(
-        "d",
-        `M${element.width * 0.062},${element.height * 0.25}
-            L${element.width * 0.8},${element.height * 0.25}
-            L${element.width * 0.8},0
-            L${element.width},${element.height * 0.5}
-            L${element.width * 0.8},${element.height}
-            L${element.width * 0.8},${element.height * 0.75}
-            L${element.width * 0.062},${element.height * 0.75}
-            Z`
-      )
-
-      // 第一条尾部条纹
-      const stripe1 = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      stripe1.setAttribute(
-        "d",
-        `M0,${element.height * 0.25}
-            L${element.width * 0.012},${element.height * 0.25}
-            L${element.width * 0.012},${element.height * 0.75}
-            L0,${element.height * 0.75}
-            Z`
-      )
-
-      // 第二条尾部条纹
-      const stripe2 = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      stripe2.setAttribute(
-        "d",
-        `M${element.width * 0.025},${element.height * 0.25}
-            L${element.width * 0.049},${element.height * 0.25}
-            L${element.width * 0.049},${element.height * 0.75}
-            L${element.width * 0.025},${element.height * 0.75}
-            Z`
-      )
-
-      // 设置填充色
-      setBackground(element, mainArrow)
-      setBackground(element, stripe1)
-      setBackground(element, stripe2)
-      // 设置边框
-      if (element.borderWidth > 0) {
-        ;[mainArrow, stripe1, stripe2].forEach((path) => {
-          path.setAttribute("stroke", element.borderColor || "#000")
-          path.setAttribute("stroke-width", element.borderWidth || 1)
-          path.setAttribute("stroke-linecap", "butt")
-          path.setAttribute("stroke-linejoin", "round")
-
-          // 处理虚线边框
-          if (
-            element.borderType === "dotted" ||
-            element.borderType === "dashed"
-          ) {
-            if (element.borderStrokeDasharray) {
-              path.setAttribute(
-                "stroke-dasharray",
-                element.borderStrokeDasharray
-              )
-            } else if (element.borderType === "dotted") {
-              path.setAttribute("stroke-dasharray", "1, 3")
-            } else if (element.borderType === "dashed") {
-              path.setAttribute("stroke-dasharray", "5, 5")
-            }
-          }
-        })
-      }
-
-      stripedRightArrow.appendChild(mainArrow)
-      stripedRightArrow.appendChild(stripe1)
-      stripedRightArrow.appendChild(stripe2)
-      svg.appendChild(stripedRightArrow)
-      break
-    case "rightArrowCallout":
-      const rightArrowCallout = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      rightArrowCallout.setAttribute(
-        "d",
-        `M0,0
-            L${element.width * 0.44},0
-            L${element.width * 0.44},${element.height * 0.375}
-            L${element.width * 0.79},${element.height * 0.375}
-            L${element.width * 0.79},${element.height * 0.25}
-            L${element.width},${element.height * 0.5}
-            L${element.width * 0.79},${element.height * 0.75}
-            L${element.width * 0.79},${element.height * 0.625}
-            L${element.width * 0.44},${element.height * 0.625}
-            L${element.width * 0.44},${element.height}
-            L0,${element.height}
-            Z`
-      )
-
-      // 设置填充色
-      setBackground(element, rightArrowCallout)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        rightArrowCallout.setAttribute("stroke", element.borderColor || "#000")
-        rightArrowCallout.setAttribute("stroke-width", element.borderWidth || 1)
-        rightArrowCallout.setAttribute("stroke-linecap", "butt")
-        rightArrowCallout.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            rightArrowCallout.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            rightArrowCallout.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            rightArrowCallout.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(rightArrowCallout)
-      break
-    case "leftRightArrowCallout":
-      const leftRightArrowCallout = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      leftRightArrowCallout.setAttribute(
-        "d",
-        `M0,${element.height * 0.5}
-            L${element.width * 0.139},${element.height * 0.25}
-            L${element.width * 0.139},${element.height * 0.375}
-            L${element.width * 0.364},${element.height * 0.375}
-            L${element.width * 0.364},0
-            L${element.width * 0.636},0
-            L${element.width * 0.636},${element.height * 0.375}
-            L${element.width * 0.861},${element.height * 0.375}
-            L${element.width * 0.861},${element.height * 0.25}
-            L${element.width},${element.height * 0.5}
-            L${element.width * 0.861},${element.height * 0.75}
-            L${element.width * 0.861},${element.height * 0.625}
-            L${element.width * 0.636},${element.height * 0.625}
-            L${element.width * 0.636},${element.height}
-            L${element.width * 0.364},${element.height}
-            L${element.width * 0.364},${element.height * 0.625}
-            L${element.width * 0.139},${element.height * 0.625}
-            L${element.width * 0.139},${element.height * 0.75}
-            Z`
-      )
-
-      // 设置填充色
-      setBackground(element, leftRightArrowCallout)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        leftRightArrowCallout.setAttribute(
-          "stroke",
-          element.borderColor || "#000"
-        )
-        leftRightArrowCallout.setAttribute(
-          "stroke-width",
-          element.borderWidth || 1
-        )
-        leftRightArrowCallout.setAttribute("stroke-linecap", "butt")
-        leftRightArrowCallout.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            leftRightArrowCallout.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            leftRightArrowCallout.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            leftRightArrowCallout.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(leftRightArrowCallout)
-      break
-    case "quadArrowCallout":
-      const quadArrowCallout = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      quadArrowCallout.setAttribute(
-        "d",
-        `M0,${element.height * 0.5}
-            L${element.width * 0.096},${element.height * 0.315}
-            L${element.width * 0.096},${element.height * 0.407}
-            L${element.width * 0.26},${element.height * 0.407}
-            L${element.width * 0.26},${element.height * 0.259}
-            L${element.width * 0.453},${element.height * 0.259}
-            L${element.width * 0.453},${element.height * 0.185}
-            L${element.width * 0.405},${element.height * 0.185}
-            L${element.width * 0.5},0
-            L${element.width * 0.595},${element.height * 0.185}
-            L${element.width * 0.547},${element.height * 0.185}
-            L${element.width * 0.547},${element.height * 0.259}
-            L${element.width * 0.74},${element.height * 0.259}
-            L${element.width * 0.74},${element.height * 0.407}
-            L${element.width * 0.904},${element.height * 0.407}
-            L${element.width * 0.904},${element.height * 0.315}
-            L${element.width},${element.height * 0.5}
-            L${element.width * 0.904},${element.height * 0.685}
-            L${element.width * 0.904},${element.height * 0.593}
-            L${element.width * 0.74},${element.height * 0.593}
-            L${element.width * 0.74},${element.height * 0.741}
-            L${element.width * 0.547},${element.height * 0.741}
-            L${element.width * 0.547},${element.height * 0.815}
-            L${element.width * 0.595},${element.height * 0.815}
-            L${element.width * 0.5},${element.height}
-            L${element.width * 0.405},${element.height * 0.815}
-            L${element.width * 0.453},${element.height * 0.815}
-            L${element.width * 0.453},${element.height * 0.741}
-            L${element.width * 0.26},${element.height * 0.741}
-            L${element.width * 0.26},${element.height * 0.593}
-            L${element.width * 0.096},${element.height * 0.593}
-            L${element.width * 0.096},${element.height * 0.685}
-            Z`
-      )
-
-      // 设置填充色
-      setBackground(element, quadArrowCallout)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        quadArrowCallout.setAttribute("stroke", element.borderColor || "#000")
-        quadArrowCallout.setAttribute("stroke-width", element.borderWidth || 1)
-        quadArrowCallout.setAttribute("stroke-linecap", "butt")
-        quadArrowCallout.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            quadArrowCallout.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            quadArrowCallout.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            quadArrowCallout.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(quadArrowCallout)
-      break
-    case "leftArrowCallout":
-      const leftArrowCallout = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      leftArrowCallout.setAttribute(
-        "d",
-        `M0,${element.height * 0.5}
-            L${element.width * 0.183},${element.height * 0.25}
-            L${element.width * 0.183},${element.height * 0.375}
-            L${element.width * 0.35},${element.height * 0.375}
-            L${element.width * 0.35},0
-            L${element.width},0
-            L${element.width},${element.height}
-            L${element.width * 0.35},${element.height}
-            L${element.width * 0.35},${element.height * 0.625}
-            L${element.width * 0.183},${element.height * 0.625}
-            L${element.width * 0.183},${element.height * 0.75}
-            Z`
-      )
-
-      // 设置填充色
-      setBackground(element, leftArrowCallout)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        leftArrowCallout.setAttribute("stroke", element.borderColor || "#000")
-        leftArrowCallout.setAttribute("stroke-width", element.borderWidth || 1)
-        leftArrowCallout.setAttribute("stroke-linecap", "butt")
-        leftArrowCallout.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            leftArrowCallout.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            leftArrowCallout.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            leftArrowCallout.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(leftArrowCallout)
-      break
-    case "upArrowCallout":
-      const upArrowCallout = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      upArrowCallout.setAttribute(
-        "d",
-        `M0,${element.height * 0.35}
-            L${element.width * 0.41},${element.height * 0.35}
-            L${element.width * 0.41},${element.height * 0.25}
-            L${element.width * 0.32},${element.height * 0.25}
-            L${element.width * 0.5},0
-            L${element.width * 0.68},${element.height * 0.25}
-            L${element.width * 0.59},${element.height * 0.25}
-            L${element.width * 0.59},${element.height * 0.35}
-            L${element.width},${element.height * 0.35}
-            L${element.width},${element.height}
-            L0,${element.height}
-            Z`
-      )
-
-      // 设置填充色
-      setBackground(element, upArrowCallout)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        upArrowCallout.setAttribute("stroke", element.borderColor || "#000")
-        upArrowCallout.setAttribute("stroke-width", element.borderWidth || 1)
-        upArrowCallout.setAttribute("stroke-linecap", "butt")
-        upArrowCallout.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            upArrowCallout.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            upArrowCallout.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            upArrowCallout.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(upArrowCallout)
-      break
-    case "notchedRightArrow":
-      const notchedRightArrow = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      notchedRightArrow.setAttribute(
-        "d",
-        `M0,${element.height * 0.25}
-            L${element.width * 0.83},${element.height * 0.25}
-            L${element.width * 0.83},0
-            L${element.width},${element.height * 0.5}
-            L${element.width * 0.83},${element.height}
-            L${element.width * 0.83},${element.height * 0.75}
-            L0,${element.height * 0.75}
-            L${element.width * 0.086},${element.height * 0.5}
-            Z`
-      )
-
-      // 设置填充色
-      setBackground(element, notchedRightArrow)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        notchedRightArrow.setAttribute("stroke", element.borderColor || "#000")
-        notchedRightArrow.setAttribute("stroke-width", element.borderWidth || 1)
-        notchedRightArrow.setAttribute("stroke-linecap", "butt")
-        notchedRightArrow.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            notchedRightArrow.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            notchedRightArrow.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            notchedRightArrow.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(notchedRightArrow)
-      break
-    case "homePlate":
-      const homePlate = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      homePlate.setAttribute(
-        "d",
-        `M0,0
-            L${element.width * 0.925},0
-            L${element.width},${element.height * 0.5}
-            L${element.width * 0.925},${element.height}
-            L0,${element.height}
-            Z`
-      )
-
-      // 设置填充色
-      setBackground(element, homePlate)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        homePlate.setAttribute("stroke", element.borderColor || "#000")
-        homePlate.setAttribute("stroke-width", element.borderWidth || 1)
-        homePlate.setAttribute("stroke-linecap", "butt")
-        homePlate.setAttribute("stroke-linejoin", "round")
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            homePlate.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            homePlate.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            homePlate.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(homePlate)
-      break
-    case "rightTriangle":
-      const rightTriangle = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      rightTriangle.setAttribute(
-        "points",
-        `0,0 ${element.width},${element.height} 0,${element.height}`
-      )
-
-      // 设置填充色
-      setBackground(element, rightTriangle)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        rightTriangle.setAttribute("stroke", element.borderColor || "#000")
-        rightTriangle.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            rightTriangle.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            rightTriangle.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            rightTriangle.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(rightTriangle)
-      break
-    case "semiCircle":
-      const semiCircle = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      semiCircle.setAttribute(
-        "d",
-        `M0,${element.height} A${element.width / 2},${element.height} 0 0,1 ${
-          element.width
-        },${element.height} Z`
-      )
-
-      // 设置填充色
-      setBackground(element, semiCircle)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        semiCircle.setAttribute("stroke", element.borderColor || "#000")
-        semiCircle.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            semiCircle.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            semiCircle.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            semiCircle.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(semiCircle)
-      break
-
-    case "star":
-      const star = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      const cx = element.width / 2
-      const cy = element.height / 2
-      const outerRadius = Math.min(element.width, element.height) / 2
-      const innerRadius = outerRadius * 0.4
-      let starPoints = ""
-
-      for (let i = 0; i < 10; i++) {
-        const radius = i % 2 === 0 ? outerRadius : innerRadius
-        const angle = (Math.PI * i) / 5
-        const x = cx + radius * Math.sin(angle)
-        const y = cy - radius * Math.cos(angle)
-        starPoints += `${x},${y} `
-      }
-
-      star.setAttribute("points", starPoints.trim())
-
-      // 设置填充色
-      setBackground(element, star)
-      // 设置边框
-      if (element.borderWidth > 0) {
-        star.setAttribute("stroke", element.borderColor || "#000")
-        star.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            star.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
-          } else if (element.borderType === "dotted") {
-            star.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            star.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(star)
-      break
-
-    case "cross":
-      const cross = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-      cross.setAttribute(
-        "points",
-        `${element.width * 0.35},0 ${element.width * 0.65},0 ${
-          element.width * 0.65
-        },${element.height * 0.35} ` +
-          `${element.width},${element.height * 0.35} ${element.width},${
-            element.height * 0.65
-          } ` +
-          `${element.width * 0.65},${element.height * 0.65} ${
-            element.width * 0.65
-          },${element.height} ` +
-          `${element.width * 0.35},${element.height} ${element.width * 0.35},${
-            element.height * 0.65
-          } ` +
-          `0,${element.height * 0.65} 0,${element.height * 0.35} ${
-            element.width * 0.35
-          },${element.height * 0.35}`
-      )
-
-      // 设置填充色
-      setBackground(element, cross)
-      // 设置边框
-      if (element.borderWidth > 0) {
-        cross.setAttribute("stroke", element.borderColor || "#000")
-        cross.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            cross.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            cross.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            cross.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(cross)
-      break
-
-    case "chevron":
-      const chevron = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon"
-      )
-
-      chevron.setAttribute(
-        "points",
-        `${element.width * 0.5},0 ${element.width},${element.height * 0.5} ` +
-          `${element.width * 0.5},${element.height} ` +
-          `0,${element.height} ${element.width * 0.5},${
-            element.height * 0.5
-          } 0,0`
-      )
-
-      // 设置填充色
-      setBackground(element, chevron)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        chevron.setAttribute("stroke", element.borderColor || "#000")
-        chevron.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            chevron.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            chevron.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            chevron.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(chevron)
-      break
-
-    case "frame":
-      // 创建外框和内框
-      const outerRect = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "rect"
-      )
-      outerRect.setAttribute("x", 0)
-      outerRect.setAttribute("y", 0)
-      outerRect.setAttribute("width", element.width)
-      outerRect.setAttribute("height", element.height)
-
-      const innerRect = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "rect"
-      )
-      const frameWidth = element.width / 10
-      innerRect.setAttribute("x", frameWidth)
-      innerRect.setAttribute("y", frameWidth)
-      innerRect.setAttribute("width", element.width - frameWidth * 2)
-      innerRect.setAttribute("height", element.height - frameWidth * 2)
-
-      // 设置填充色
-      setBackground(element, outerRect)
-      innerRect.setAttribute("fill", "white") // 内框为白色
-      // 设置边框
-      if (element.borderWidth > 0) {
-        outerRect.setAttribute("stroke", element.borderColor || "#000")
-        outerRect.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            outerRect.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            outerRect.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            outerRect.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(outerRect)
-      svg.appendChild(innerRect)
-      break
-
-    case "cloud":
-      // 使用路径绘制云形
-      const cloud = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      const w = element.width
-      const h = element.height
-
-      cloud.setAttribute(
-        "d",
-        `M${w * 0.2},${h * 0.6} ` +
-          `C${w * 0.05},${h * 0.6} ${w * 0.05},${h * 0.3} ${w * 0.2},${
-            h * 0.3
-          } ` +
-          `C${w * 0.2},${h * 0.1} ${w * 0.45},${h * 0.1} ${w * 0.5},${
-            h * 0.3
-          } ` +
-          `C${w * 0.55},${h * 0.1} ${w * 0.8},${h * 0.1} ${w * 0.8},${
-            h * 0.3
-          } ` +
-          `C${w * 0.95},${h * 0.3} ${w * 0.95},${h * 0.6} ${w * 0.8},${
-            h * 0.6
-          } ` +
-          `L${w * 0.2},${h * 0.6} Z`
-      )
-
-      // 设置填充色
-      setBackground(element, cloud)
-      // 设置边框
-      if (element.borderWidth > 0) {
-        cloud.setAttribute("stroke", element.borderColor || "#000")
-        cloud.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            cloud.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            cloud.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            cloud.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(cloud)
-      break
-    case "blockArc":
-      const blockArc = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-
-      // 计算弧形参数
-      const rx = element.width / 2
-      const ry = element.height / 2
-      const innerRatio = 0.86 // 根据示例计算的内弧半径比例
-      const innerRx = rx * innerRatio
-      const innerRy = ry * innerRatio
-
-      // 构建路径
-      const path2 = `
-            M 0,${ry} 
-            A ${rx} ${ry} 0 1 1 ${element.width} ${ry}
-            L ${element.width - (rx - innerRx)},${ry}
-            A ${innerRx} ${innerRy} 0 1 0 ${rx - innerRx},${ry}
-            Z`
-
-      blockArc.setAttribute("d", path2.trim())
-
-      // 设置填充色
-      setBackground(element, blockArc)
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        blockArc.setAttribute("stroke", element.borderColor || "#000")
-        blockArc.setAttribute("stroke-width", element.borderWidth || 1)
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            blockArc.setAttribute(
-              "stroke-dasharray",
-              element.borderStrokeDasharray
-            )
-          } else if (element.borderType === "dotted") {
-            blockArc.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            blockArc.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(blockArc)
-      break
-
-    case "rect":
-    default:
-      const rect = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "rect"
-      )
-      rect.setAttribute("x", 0)
-      rect.setAttribute("y", 0)
-      rect.setAttribute("width", element.width)
-      rect.setAttribute("height", element.height)
-      if (element.fill && element.fill.type) {
-        // 设置填充色
-        if (element.fill.type === "color") {
-          rect.setAttribute("fill", element.fill.value || "transparent")
-        } else if (element.fill.type === "gradient") {
-          // 渐变填充
-          const { colors, path, rot } = element.fill.value
-
-          if (colors && colors.length >= 2) {
-            const gradientType = path === "rect" ? "linear" : "radial"
-            const gradientAngle =
-              gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
-
-            let gradientString = `${gradientType}-gradient(`
-            if (gradientType === "linear") {
-              gradientString += `${gradientAngle}deg, `
-            }
-
-            colors.forEach((color, i) => {
-              gradientString += `${color.color} ${color.pos}${
-                i < colors.length - 1 ? ", " : ""
-              }`
-            })
-            gradientString += ")"
-
-            // 创建渐变定义
-            const gradientDef = document.createElementNS(
-              "http://www.w3.org/2000/svg",
-              "defs"
-            )
-            const gradientEl = document.createElementNS(
-              "http://www.w3.org/2000/svg",
-              gradientType === "linear" ? "linearGradient" : "radialGradient"
-            )
-            const gradientId = `gradient-${Date.now()}-${Math.random()
-              .toString(36)
-              .substr(2, 9)}`
-            gradientEl.setAttribute("id", gradientId)
-
-            // 设置渐变属性
-            if (gradientType === "linear") {
-              gradientEl.setAttribute(
-                "gradientTransform",
-                `rotate(${gradientAngle})`
-              )
-            }
-
-            // 添加渐变色标
-            colors.forEach((color) => {
-              const stop = document.createElementNS(
-                "http://www.w3.org/2000/svg",
-                "stop"
-              )
-              stop.setAttribute("offset", color.pos)
-              stop.setAttribute("stop-color", color.color)
-              gradientEl.appendChild(stop)
-            })
-
-            gradientDef.appendChild(gradientEl)
-            svg.appendChild(gradientDef)
-
-            // 应用渐变
-            rect.setAttribute("fill", `url(#${gradientId})`)
-          }
-        } else if (element.fill.type === "image") {
-          // 创建图案填充
-          const pattern = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "pattern"
-          )
-          const patternId = `pattern-${Date.now()}-${Math.random()
-            .toString(36)
-            .substr(2, 9)}`
-          pattern.setAttribute("id", patternId)
-          pattern.setAttribute("patternUnits", "userSpaceOnUse")
-          pattern.setAttribute("width", "100%")
-          pattern.setAttribute("height", "100%")
-
-          // 创建图片元素
-          const image = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "image"
-          )
-          image.setAttribute("width", "100%")
-          image.setAttribute("height", "100%")
-          image.setAttribute("preserveAspectRatio", "xMidYMid slice")
-          image.setAttributeNS(
-            "http://www.w3.org/1999/xlink",
-            "href",
-            element.fill.value.picBase64
-          )
-
-          pattern.appendChild(image)
-
-          // 添加pattern到defs
-          const defs = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "defs"
-          )
-          defs.appendChild(pattern)
-          svg.appendChild(defs)
-
-          // 应用图案填充
-          rect.setAttribute("fill", `url(#${patternId})`)
-        } else {
-          rect.setAttribute("fill", "transparent")
-        }
-      } else {
-        rect.setAttribute("fill", "#ffffff00")
-      }
-
-      // 设置边框
-      if (element.borderWidth > 0) {
-        rect.setAttribute("stroke", element.borderColor || "#000")
-        rect.setAttribute("stroke-width", element.borderWidth || 1)
-
-        // 处理虚线边框
-        if (
-          element.borderType === "dotted" ||
-          element.borderType === "dashed"
-        ) {
-          if (element.borderStrokeDasharray) {
-            rect.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
-          } else if (element.borderType === "dotted") {
-            rect.setAttribute("stroke-dasharray", "1, 3")
-          } else if (element.borderType === "dashed") {
-            rect.setAttribute("stroke-dasharray", "5, 5")
-          }
-        }
-      }
-
-      svg.appendChild(rect)
-      break
-  }
-
-  const transformList = []
-  let rotateDeg = element.rotate || 0
-
-  if (element.isFlipV) {
-    transformList.push(`scaleY(-1)`)
-    rotateDeg = -rotateDeg // 垂直翻转时反转旋转方向
-  }
-
-  if (element.isFlipH) {
-    transformList.push(`scaleX(-1)`)
-    rotateDeg = -rotateDeg // 水平翻转时反转旋转方向
-  }
-
-  if (element.rotate) {
-    transformList.push(`rotate(${rotateDeg}deg)`)
-  }
-
-  if (transformList.length > 0) {
-    el.style.transform = transformList.join(" ")
-    el.style.transformOrigin = "center center"
-  }
-
-  el.appendChild(svg)
-
-  // 设置形状内容
-  if (element.content) {
-    const contentContainer = document.createElement("div")
-    contentContainer.innerHTML = this.convertPtToPxInContent(element.content)
-    contentContainer.style.position = "absolute"
-    contentContainer.style.width = element.width + "px"
-    contentContainer.style.height = element.height + "px"
-    contentContainer.style.top = "0px"
-    contentContainer.style.left = "0px"
-    contentContainer.style.display = "flex"
-    contentContainer.style.alignItems = "center"
-    contentContainer.style.justifyContent = "center"
-    contentContainer.style.zIndex = element.order
-    contentContainer.style.pointerEvents = "none"
-    const transformList = []
-    let rotateDeg = element.rotate || 0
-
-    if (element.isFlipV) {
-      transformList.push(`scaleY(-1)`)
-      rotateDeg = -rotateDeg // 垂直翻转时反转旋转方向
-    }
-
-    if (element.isFlipH) {
-      transformList.push(`scaleX(-1)`)
-      rotateDeg = -rotateDeg // 水平翻转时反转旋转方向
-    }
-
-    if (element.rotate) {
-      transformList.push(`rotate(${rotateDeg}deg)`)
-    }
-
-    if (transformList.length > 0) {
-      contentContainer.style.transform = transformList.join(" ")
-      contentContainer.style.transformOrigin = "center center"
-    }
-    el.appendChild(contentContainer)
-  }
-  return el
-}
-
-// 创建表格元素
-const createTableElement = (element) => {
-  const el = document.createElement("div")
-  el.style.position = "absolute"
-  el.style.top = element.top + "px"
-  el.style.left = element.left + "px"
-  el.style.width = element.width + "px"
-  el.style.height = element.height + "px"
-  el.style.zIndex = element.order
-
-  // 创建表格元素
-  const table = document.createElement("table")
-  table.style.width = element.width + "px"
-  table.style.height = element.height + "px"
-  table.style.borderCollapse = "collapse"
-  table.style.tableLayout = "fixed"
-  // 设置表格边框
-  if (element.borders) {
-    if (element.borders.all) {
-      const border = element.borders.all
-      table.style.border = `${border.borderWidth || 1}px ${
-        border.borderType || "solid"
-      } ${border.borderColor || "#000"}`
-    } else {
-      // 分别设置四边边框
-      if (element.borders.top) {
-        table.style.borderTop = `${element.borders.top.borderWidth || 1}px ${
-          element.borders.top.borderType || "solid"
-        } ${element.borders.top.borderColor || "#000"}`
-      }
-      if (element.borders.bottom) {
-        table.style.borderBottom = `${
-          element.borders.bottom.borderWidth || 1
-        }px ${element.borders.bottom.borderType || "solid"} ${
-          element.borders.bottom.borderColor || "#000"
-        }`
-      }
-      if (element.borders.left) {
-        table.style.borderLeft = `${element.borders.left.borderWidth || 1}px ${
-          element.borders.left.borderType || "solid"
-        } ${element.borders.left.borderColor || "#000"}`
-      }
-      if (element.borders.right) {
-        table.style.borderRight = `${
-          element.borders.right.borderWidth || 1
-        }px ${element.borders.right.borderType || "solid"} ${
-          element.borders.right.borderColor || "#000"
-        }`
-      }
-    }
-  }
-
-  // 创建表格内容
-  const tbody = document.createElement("tbody")
-
-  // 处理表格数据
-  if (element.data && element.data.length > 0) {
-    element.data.forEach((rowData, rowIndex) => {
-      const tr = document.createElement("tr")
-
-      rowData.forEach((cell, colIndex) => {
-        // 跳过被合并的单元格
-        if (cell.hMerge) return
-
-        const td = document.createElement("td")
-
-        // 设置单元格内容
-        if (cell.text) {
-          td.innerHTML = this.convertPtToPxInContent(cell.text)
-        }
-
-        // 设置单元格样式
-        td.style.padding = "0px"
-        td.style.verticalAlign = "middle"
-
-        // 设置文本样式
-        if (cell.fontColor) td.style.color = cell.fontColor
-        if (cell.fontSize) td.style.fontSize = cell.fontSize
-        if (cell.fontFamily) td.style.fontFamily = cell.fontFamily
-        if (cell.bold) td.style.fontWeight = "bold"
-        if (cell.italic) td.style.fontStyle = "italic"
-        if (cell.underline) td.style.textDecoration = "underline"
-        if (cell.align) td.style.textAlign = cell.align
-
-        // 设置背景色
-        if (cell.fillColor) td.style.backgroundColor = cell.fillColor
-
-        // 设置单元格边框
-        if (cell.borders) {
-          if (cell.borders.all) {
-            const border = cell.borders.all
-            td.style.border = `${border.borderWidth || 1}px ${
-              border.borderType || "solid"
-            } ${border.borderColor || "#000"}`
-          } else {
-            // 分别设置四边边框
-            if (cell.borders.top) {
-              td.style.borderTop = `${cell.borders.top.borderWidth || 1}px ${
-                cell.borders.top.borderType || "solid"
-              } ${cell.borders.top.borderColor || "#000"}`
-            }
-            if (cell.borders.bottom) {
-              td.style.borderBottom = `${
-                cell.borders.bottom.borderWidth || 1
-              }px ${cell.borders.bottom.borderType || "solid"} ${
-                cell.borders.bottom.borderColor || "#000"
-              }`
-            }
-            if (cell.borders.left) {
-              td.style.borderLeft = `${cell.borders.left.borderWidth || 1}px ${
-                cell.borders.left.borderType || "solid"
-              } ${cell.borders.left.borderColor || "#000"}`
-            }
-            if (cell.borders.right) {
-              td.style.borderRight = `${
-                cell.borders.right.borderWidth || 1
-              }px ${cell.borders.right.borderType || "solid"} ${
-                cell.borders.right.borderColor || "#000"
-              }`
-            }
-          }
-        }
-        td.style.width = element.colWidths[colIndex] + "px"
-        // 设置单元格合并
-        if (cell.colSpan && cell.colSpan > 1) {
-          td.colSpan = cell.colSpan
-          td.style.width = element.colWidths[colIndex] * cell.colSpan + "px"
-        }
-        if (cell.rowSpan && cell.rowSpan > 1) {
-          td.rowSpan = cell.rowSpan
-        }
-
-        tr.appendChild(td)
-      })
-      tr.style.height = element.rowHeights[rowIndex] + "px"
-      tbody.appendChild(tr)
-    })
-  }
-
-  table.appendChild(tbody)
-  el.appendChild(table)
-
-  return el
-}
-
-const createChartElement = (element) => {
-  // 实现图表元素创建逻辑
-  return document.createElement("div") // 临时返回空div
-}
-
-// 创建图表元素
-const createDiagramElement = (element) => {
-  const el = document.createElement("div")
-  el.style.position = "absolute"
-  el.style.top = element.top + "px"
-  el.style.left = element.left + "px"
-  el.style.width = element.width + "px"
-  el.style.height = element.height + "px"
-  el.style.zIndex = element.order
-
-  // 递归渲染SmartArt节点
-  const renderDiagramNode = (node) => {
-    const nodeEl = document.createElement("div")
-    nodeEl.style.position = "absolute"
-    nodeEl.style.left = node.left + "px"
-    nodeEl.style.top = node.top + "px"
-    nodeEl.style.width = node.width + "px"
-    nodeEl.style.height = node.height + "px"
-
-    // 设置边框
-    if (node.borderWidth > 0) {
-      nodeEl.style.border = `${node.borderWidth}px ${node.borderType} ${node.borderColor}`
-      if (node.borderStrokeDasharray && node.borderStrokeDasharray !== "0") {
-        nodeEl.style.borderStyle = "dashed"
-      }
-    }
-
-    // 设置背景填充
-    if (node.fill && node.fill.type === "color") {
-      nodeEl.style.backgroundColor = node.fill.value
-    }
-
-    // 设置内容
-    if (node.content) {
-      nodeEl.innerHTML = convertPtToPxInContent(node.content)
-    }
-
-    // 设置垂直对齐
-    if (node.vAlign === "mid") {
-      nodeEl.style.display = "flex"
-      nodeEl.style.alignItems = "center"
-      nodeEl.style.justifyContent = "center"
-    }
-
-    // 设置翻转
-    const transforms = []
-    if (node.isFlipV) {
-      transforms.push("scaleY(-1)")
-    }
-    if (node.isFlipH) {
-      transforms.push("scaleX(-1)")
-    }
-    if (transforms.length > 0) {
-      nodeEl.style.transform = transforms.join(" ")
-    }
-
-    return nodeEl
-  }
-
-  // 按照 order 排序元素
-  const sortedElements = [...element.elements].sort((a, b) => a.order - b.order)
-
-  // 渲染所有节点
-  sortedElements.forEach((node) => {
-    const nodeEl = renderDiagramNode(node)
-    el.appendChild(nodeEl)
-  })
-
-  return el
-}
-
-// 创建数学公式元素
-const createMathElement = (element) => {
-  const el = document.createElement("div")
-  el.style.position = "absolute"
-  el.style.top = element.top + "px"
-  el.style.left = element.left + "px"
-  el.style.width = element.width + "px"
-  el.style.height = element.height + "px"
-  el.style.zIndex = element.order
-
-  // 应用旋转变换
-  if (element.rotate) {
-    el.style.transform = `rotate(${element.rotate}deg)`
-    el.style.transformOrigin = "center center"
-  }
-
-  // 设置数学公式内容
-  if (element.mathXml) {
-    // 如果有MathML格式的内容
-    try {
-      // 创建MathML命名空间的元素
-      const mathEl = document.createElementNS(
-        "http://www.w3.org/1998/Math/MathML",
-        "math"
-      )
-      mathEl.innerHTML = element.mathXml
-      el.appendChild(mathEl)
-    } catch (error) {
-      console.error("创建MathML元素失败:", error)
-      // 回退方案：直接显示文本
-      el.textContent = element.text || "数学公式"
-    }
-  } else if (element.text) {
-    // 如果只有文本内容
-    el.textContent = element.text
-  }
-
-  // 应用样式
-  if (element.style) {
-    // 字体样式
-    if (element.style.fontFamily) {
-      el.style.fontFamily = element.style.fontFamily
-    }
-
-    // 字体大小
-    if (element.style.fontSize) {
-      el.style.fontSize = element.style.fontSize + "px"
-    }
-
-    // 字体颜色
-    if (element.style.color) {
-      el.style.color = element.style.color
-    }
-  }
-
-  // 应用背景色
-  if (element.fill && element.fill.type === "color") {
-    el.style.backgroundColor = element.fill.value
-  }
-
-  // 应用边框
-  if (element.borderColor && element.borderWidth) {
-    el.style.border = `${element.borderWidth}px ${
-      element.borderType || "solid"
-    } ${element.borderColor}`
-  }
-
-  return el
-}
-
-// 创建文本元素
-const createTextElement = (element) => {
-  const el = document.createElement("div")
-  el.style.position = "absolute"
-  el.style.top = element.top + "px"
-  el.style.left = element.left + "px"
-  el.style.width = element.width + "px"
-  el.style.height = element.height + "px"
-  el.style.zIndex = element.order
-  el.style.overflow = "hidden"
-
-  // 应用旋转变换
-  if (element.rotate) {
-    el.style.transform = `rotate(${element.rotate}deg)`
-    el.style.transformOrigin = "center center"
-  }
-
-  // 应用文本内容
-  if (element.text) {
-    el.innerHTML = element.text
-  }
-
-  // 应用文本样式
-  if (element.style) {
-    // 字体样式
-    if (element.style.fontFamily) {
-      el.style.fontFamily = element.style.fontFamily
-    }
-
-    // 字体大小
-    if (element.style.fontSize) {
-      el.style.fontSize = element.style.fontSize + "px"
-    }
-
-    // 字体颜色
-    if (element.style.color) {
-      el.style.color = element.style.color
-    }
-
-    // 字体粗细
-    if (element.style.fontWeight) {
-      el.style.fontWeight = element.style.fontWeight
-    }
-
-    // 字体样式（斜体等）
-    if (element.style.fontStyle) {
-      el.style.fontStyle = element.style.fontStyle
-    }
-
-    // 文本装饰（下划线等）
-    if (element.style.textDecoration) {
-      el.style.textDecoration = element.style.textDecoration
-    }
-
-    // 文本对齐
-    if (element.style.textAlign) {
-      el.style.textAlign = element.style.textAlign
-    }
-
-    // 行高
-    if (element.style.lineHeight) {
-      el.style.lineHeight = element.style.lineHeight
-    }
-
-    // 字间距
-    if (element.style.letterSpacing) {
-      el.style.letterSpacing = element.style.letterSpacing + "px"
-    }
-
-    // 文本缩进
-    if (element.style.textIndent) {
-      el.style.textIndent = element.style.textIndent + "px"
-    }
-
-    // 垂直对齐
-    if (element.style.verticalAlign) {
-      el.style.verticalAlign = element.style.verticalAlign
-    }
-  }
-
-  // 应用背景色
-  if (element.fill && element.fill.type === "color") {
-    el.style.backgroundColor = element.fill.value
-  }
-
-  // 应用边框
-  if (element.borderColor && element.borderWidth) {
-    el.style.border = `${element.borderWidth}px ${
-      element.borderType || "solid"
-    } ${element.borderColor}`
-  }
-
-  // 应用内边距
-  if (element.padding) {
-    el.style.padding = element.padding + "px"
-  }
-
-  return el
-}
-
-// 递归调整元素位置
-const adjustElementPosition = (element, parentElement) => {
-  // 创建深拷贝，但保留特殊属性的引用
-  const adjustedElement = JSON.parse(JSON.stringify(element))
-
-  // 调整位置为相对于父组合元素的位置
-  adjustedElement.top = element.top - parentElement.top
-  adjustedElement.left = element.left - parentElement.left
-
-  // 恢复特殊属性的引用
-  const specialProps = [
-    "src",
-    "blob",
-    "fill",
-    "text",
-    "path",
-    "elements",
-    "borderColor",
-    "borderWidth",
-    "borderType",
-  ]
-  specialProps.forEach((prop) => {
-    if (element[prop] !== undefined) {
-      adjustedElement[prop] = element[prop]
-    }
-  })
-
-  // 如果是组合元素，递归处理其子元素
-  if (element.type === "group" && element.elements) {
-    adjustedElement.elements = element.elements.map((childElement) =>
-      adjustElementPosition(childElement, {
-        top: element.top,
-        left: element.left,
-      })
-    )
-  }
-
-  return adjustedElement
-}
-
-// 绘制类别标签
-const drawCategoryLabels = (svg, categories, padding, groupWidth, barDir) => {
-  if (!categories || !categories.length) return
-
-  // 创建标签组
-  const labelGroup = document.createElementNS("http://www.w3.org/2000/svg", "g")
-  labelGroup.setAttribute("class", "category-labels")
-
-  // 计算标签位置
-  const isVertical = barDir === "vertical"
-  const labelSpacing = groupWidth
-
-  // 绘制每个类别标签
-  categories.forEach((category, index) => {
-    const label = document.createElementNS("http://www.w3.org/2000/svg", "text")
-
-    // 设置标签文本
-    label.textContent = category
-
-    // 设置标签样式
-    label.setAttribute("font-size", "12")
-    label.setAttribute("text-anchor", isVertical ? "middle" : "start")
-
-    // 设置标签位置
-    if (isVertical) {
-      // 垂直条形图，标签在底部
-      label.setAttribute("x", padding + index * labelSpacing + labelSpacing / 2)
-      label.setAttribute("y", svg.getAttribute("height") - padding / 3)
-      label.setAttribute("dominant-baseline", "hanging")
-    } else {
-      // 水平条形图，标签在左侧
-      label.setAttribute("x", padding / 2)
-      label.setAttribute("y", padding + index * labelSpacing + labelSpacing / 2)
-      label.setAttribute("dominant-baseline", "middle")
-      label.setAttribute("text-anchor", "end")
-    }
-
-    // 添加标签到组
-    labelGroup.appendChild(label)
-  })
-
-  // 将标签组添加到SVG
-  svg.appendChild(labelGroup)
-
-  return labelGroup
-}
-
-// 绘制网格线
-const drawGrid = (svg, padding, width, height, maxValue) => {
-  // 创建网格组
-  const gridGroup = document.createElementNS("http://www.w3.org/2000/svg", "g")
-  gridGroup.setAttribute("class", "chart-grid")
-
-  // 设置网格线样式
-  const gridColor = "#e0e0e0"
-  const gridWidth = 1
-
-  // 计算网格间距
-  const gridCount = 5 // 网格线数量
-  const gridStep = (height - padding * 2) / gridCount
-
-  // 绘制水平网格线
-  for (let i = 0; i <= gridCount; i++) {
-    const y = padding + i * gridStep
-    const line = document.createElementNS("http://www.w3.org/2000/svg", "line")
-
-    line.setAttribute("x1", padding)
-    line.setAttribute("y1", y)
-    line.setAttribute("x2", width - padding)
-    line.setAttribute("y2", y)
-    line.setAttribute("stroke", gridColor)
-    line.setAttribute("stroke-width", gridWidth)
-
-    // 如果是底线，加粗显示
-    if (i === gridCount) {
-      line.setAttribute("stroke-width", gridWidth * 2)
-      line.setAttribute("stroke", "#aaa")
-    }
-
-    gridGroup.appendChild(line)
-
-    // 添加刻度值（除了底线）
-    if (i < gridCount) {
-      const valueText = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "text"
-      )
-      const value = Math.round((gridCount - i) * (maxValue / gridCount))
-
-      valueText.textContent = value
-      valueText.setAttribute("x", padding - 5)
-      valueText.setAttribute("y", y)
-      valueText.setAttribute("text-anchor", "end")
-      valueText.setAttribute("dominant-baseline", "middle")
-      valueText.setAttribute("font-size", "10")
-      valueText.setAttribute("fill", "#666")
-
-      gridGroup.appendChild(valueText)
-    }
-  }
-
-  // 添加网格组到SVG
-  svg.appendChild(gridGroup)
-
-  return gridGroup
-}
-
-// 绘制图表图例
-const drawLegend = (svg, series, colors, padding) => {
-  // 创建图例容器
-  const legendGroup = document.createElementNS(
-    "http://www.w3.org/2000/svg",
-    "g"
-  )
-  legendGroup.setAttribute("class", "chart-legend")
-
-  // 设置图例位置
-  const legendX = padding
-  const legendY = padding
-  let currentY = legendY
-
-  // 为每个系列创建图例项
-  series.forEach((item, index) => {
-    const itemGroup = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "g"
-    )
-    itemGroup.setAttribute("transform", `translate(${legendX}, ${currentY})`)
-
-    // 创建图例颜色标记
-    const colorMark = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "rect"
-    )
-    colorMark.setAttribute("width", "12")
-    colorMark.setAttribute("height", "12")
-    colorMark.setAttribute("fill", colors[index % colors.length])
-
-    // 创建图例文本
-    const text = document.createElementNS("http://www.w3.org/2000/svg", "text")
-    text.setAttribute("x", "20")
-    text.setAttribute("y", "10")
-    text.setAttribute("font-size", "12")
-    text.setAttribute("alignment-baseline", "middle")
-    text.textContent = item.name || `系列 ${index + 1}`
-
-    // 将元素添加到组中
-    itemGroup.appendChild(colorMark)
-    itemGroup.appendChild(text)
-    legendGroup.appendChild(itemGroup)
-
-    // 更新下一个图例项的Y坐标
-    currentY += 20
-  })
-
-  // 将图例组添加到SVG中
-  svg.appendChild(legendGroup)
-
-  return legendGroup
-}
-
-// 调整颜色亮度
-const adjustBrightness = (color, factor) => {
-  // 如果颜色为空或不是字符串，返回原值
-  if (!color || typeof color !== "string") return color
-
-  // 处理十六进制颜色
-  if (color.startsWith("#")) {
-    let hex = color.substring(1)
-
-    // 处理简写形式 (#RGB)
-    if (hex.length === 3) {
-      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
-    }
-
-    // 解析RGB值
-    const r = parseInt(hex.substring(0, 2), 16)
-    const g = parseInt(hex.substring(2, 4), 16)
-    const b = parseInt(hex.substring(4, 6), 16)
-
-    // 调整亮度
-    const adjustedR = Math.min(255, Math.max(0, Math.round(r * factor)))
-    const adjustedG = Math.min(255, Math.max(0, Math.round(g * factor)))
-    const adjustedB = Math.min(255, Math.max(0, Math.round(b * factor)))
-
-    // 转换回十六进制
-    return `#${adjustedR.toString(16).padStart(2, "0")}${adjustedG
-      .toString(16)
-      .padStart(2, "0")}${adjustedB.toString(16).padStart(2, "0")}`
-  }
-
-  // 处理rgb/rgba颜色
-  if (color.startsWith("rgb")) {
-    const rgbMatch = color.match(
-      /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
-    )
-    if (rgbMatch) {
-      const r = parseInt(rgbMatch[1])
-      const g = parseInt(rgbMatch[2])
-      const b = parseInt(rgbMatch[3])
-      const a = rgbMatch[4] !== undefined ? parseFloat(rgbMatch[4]) : 1
-
-      // 调整亮度
-      const adjustedR = Math.min(255, Math.max(0, Math.round(r * factor)))
-      const adjustedG = Math.min(255, Math.max(0, Math.round(g * factor)))
-      const adjustedB = Math.min(255, Math.max(0, Math.round(b * factor)))
-
-      // 返回调整后的颜色
-      return a < 1
-        ? `rgba(${adjustedR}, ${adjustedG}, ${adjustedB}, ${a})`
-        : `rgb(${adjustedR}, ${adjustedG}, ${adjustedB})`
-    }
-  }
-
-  // 如果不是支持的颜色格式，返回原值
-  return color
-}
-
-const convertPtToPxInContent = (content) => {
-  if (!content) return ""
-
-  // 使用正则表达式查找所有包含pt单位的样式
-  const ptRegex = /(\d+(\.\d+)?)pt/g
-
-  // 将pt转换为px (1pt ≈ 1.33px)
-  return content.replace(ptRegex, (match, value) => {
-    const pxValue = Math.round(parseFloat(value) * 1.33 * 100) / 100
-    return `${pxValue}px`
-  })
-}
-
-const processElements = (elements, slideIndex) => {
-  if (!elements || !Array.isArray(elements)) return
-
-  // 对元素进行排序处理
-  elements.sort((a, b) => a.order - b.order)
-
-  // 处理每个元素
-  elements.forEach((element) => {
-    // 设置元素的幻灯片索引
-    element.slideIndex = slideIndex
-
-    // 处理元素中的子元素
-    if (element.elements && Array.isArray(element.elements)) {
-      processElements(element.elements, slideIndex)
-    }
-
-    // 处理特殊类型元素
-    if (element.type === "group" && element.elements) {
-      // 处理组元素
-      element.elements.forEach((childElement) => {
-        // 调整子元素位置为相对于组的位置
-        childElement.top = (childElement.top || 0) + (element.top || 0)
-        childElement.left = (childElement.left || 0) + (element.left || 0)
-      })
-    }
-
-    // 处理图表元素
-    if (element.type === "chart" && element.data) {
-      // 确保图表数据格式正确
-      if (!element.data.series) {
-        element.data.series = []
-      }
-
-      // 处理图表系列数据
-      element.data.series.forEach((series) => {
-        if (!series.values) {
-          series.values = []
-        }
-      })
-    }
-  })
-
-  return elements
-}
-
-// 监听 pptxJson 变化
-watch(
-  () => props.pptxJson,
-  (newVal) => {
-    if (newVal) {
-      renderSlides()
-    }
-  },
-  { deep: true }
-)
-
-// 组件挂载时渲染幻灯片
-onMounted(() => {
-  renderSlides()
-})
-</script>
-
-<style scoped>
-.pptx-container {
-  width: 100%;
-  overflow-x: auto;
-  padding: 20px 0;
-}
-</style>

src/components/view_file/vendors/pptx/PPT3.vue

@@ -1,5051 +0,0 @@
-<!--
- * @Author: LiZhiWei
- * @Date: 2025-04-10 14:38:27
- * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-23 17:48:31
- * @Description:
--->
-<template>
-  <div id="pptx-container" ref="pptxContainer" class="pptx-container"></div>
-</template>
-<script>
-export default {
-  name: "PPT",
-  props: {
-    pptxJson: Object,
-  },
-  data() {
-    return {}
-  },
-  mounted() {
-    this.renderSlides()
-  },
-  computed: {},
-  watch: {
-    pptxJson: {
-      handler() {
-        this.renderSlides()
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    renderSlides() {
-      if (!this.$refs.pptxContainer || !this.pptxJson) return
-
-      this.$refs.pptxContainer.innerHTML = ""
-      const { size, slides } = this.pptxJson
-
-      slides.forEach((slide, index) => {
-        const slideElement = this.createSlideElement(size.width, size.height)
-        this.applySlideBackground(slideElement, slide.fill)
-        if (slide.layoutElements && Array.isArray(slide.layoutElements)) {
-          this.processElements(slide.layoutElements, index + 1)
-          slide.layoutElements.forEach((element) => {
-            const el = this.createElementByType(element)
-            if (!el) return
-            slideElement.appendChild(el)
-          })
-        }
-
-        // 渲染幻灯片元素
-        if (slide.elements && Array.isArray(slide.elements)) {
-          this.processElements(slide.elements, index + 1)
-          slide.elements.forEach((element) => {
-            const el = this.createElementByType(element)
-            if (!el) return
-            slideElement.appendChild(el)
-          })
-        }
-
-        // 添加幻灯片到容器
-        this.$refs.pptxContainer.appendChild(slideElement)
-      })
-      // 为所有p标签应用样式
-      const pTags = this.$refs.pptxContainer.querySelectorAll("p")
-      pTags.forEach((p) => {
-        p.style.margin = "0px"
-        p.style.padding = "0px"
-        p.style.wordBreak = "break-word"
-        p.style.lineHeight = "1"
-      })
-      const ulTags = this.$refs.pptxContainer.querySelectorAll("ul")
-      ulTags.forEach((ul) => {
-        ul.style.wordBreak = "break-word"
-        ul.style.lineHeight = "1"
-        ul.style.padding = "auto 0px"
-        ul.style.margin = "0px"
-      })
-      const olTags = this.$refs.pptxContainer.querySelectorAll("ol")
-      olTags.forEach((ol) => {
-        ol.style.margin = "0px"
-        ol.style.padding = "auto 0px"
-        ol.style.wordBreak = "break-word"
-        ol.style.lineHeight = "1"
-      })
-    },
-    // 创建幻灯片元素
-    createSlideElement(width, height) {
-      const slideElement = document.createElement("div")
-      slideElement.className = "slide"
-      slideElement.style.position = "relative"
-      slideElement.style.width = width + "px"
-      slideElement.style.height = height + "px"
-      slideElement.style.border = "1px solid #ccc"
-      slideElement.style.margin = "0px auto"
-      slideElement.style.marginBottom = "20px"
-      slideElement.style.overflow = "hidden"
-      return slideElement
-    },
-
-    // 应用幻灯片背景
-    applySlideBackground(slideElement, fill) {
-      if (!fill) return
-
-      if (fill.type === "gradient") {
-        const { colors, path, rot } = fill.value
-
-        if (colors && colors.length >= 2) {
-          const gradientType = path === "rect" ? "linear" : "radial"
-          const gradientAngle =
-            gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
-
-          let gradientString = `${gradientType}-gradient(`
-          if (gradientType === "linear") {
-            gradientString += `${gradientAngle}deg, `
-          }
-
-          colors.forEach((color, i) => {
-            gradientString += `${color.color} ${color.pos}${
-              i < colors.length - 1 ? ", " : ""
-            }`
-          })
-
-          gradientString += ")"
-          slideElement.style.background = gradientString
-        }
-      } else if (fill.type === "color") {
-        slideElement.style.backgroundColor = fill.value || "#FFFFFF"
-      } else if (fill.type === "image" && fill.value.picBase64) {
-        // 设置背景图片
-        slideElement.style.backgroundImage = `url(${fill.value.picBase64})`
-        slideElement.style.backgroundSize = "cover"
-        slideElement.style.backgroundPosition = "center"
-        slideElement.style.backgroundRepeat = "no-repeat"
-
-        // 如果有背景图片的混合模式
-        if (fill.value.blendMode) {
-          slideElement.style.backgroundBlendMode = fill.value.blendMode
-        }
-
-        // 如果有透明度设置
-        if (fill.value.opacity !== undefined) {
-          slideElement.style.opacity = fill.value.opacity
-        }
-      }
-    },
-
-    // 根据元素类型创建DOM元素
-    createElementByType(element) {
-      switch (element.type) {
-        case "image":
-          return this.createImageElement(element)
-        case "video":
-          return this.createVideoElement(element)
-        case "audio":
-          return this.createAudioElement(element)
-        case "shape":
-          return this.createShapeElement(element)
-        case "table":
-          return this.createTableElement(element)
-        case "chart":
-          return this.createChartElement(element)
-        case "diagram":
-          return this.createDiagramElement(element)
-        case "math":
-          return this.createMathElement(element)
-        case "group":
-          return this.createGroupElement(element)
-        default:
-          return this.createTextElement(element)
-      }
-    },
-    createGroupElement(element) {
-      // 创建组合容器
-      const groupContainer = document.createElement("div")
-      groupContainer.className = "group-element"
-      groupContainer.style.position = "absolute"
-      groupContainer.style.top = element.top + "px"
-      groupContainer.style.left = element.left + "px"
-      groupContainer.style.width = element.width + "px"
-      groupContainer.style.height = element.height + "px"
-      groupContainer.style.zIndex = element.order
-      groupContainer.style.transformOrigin = "center center"
-
-      // 创建内部容器来处理子元素
-      const innerContainer = document.createElement("div")
-      innerContainer.style.position = "relative"
-      innerContainer.style.width = "100%"
-      innerContainer.style.height = "100%"
-
-      // 应用旋转变换
-      if (element.rotate) {
-        groupContainer.style.transform = `rotate(${element.rotate}deg)`
-      }
-
-      // 应用其他样式属性
-      if (element.opacity !== undefined) {
-        groupContainer.style.opacity = element.opacity
-      }
-
-      // 递归渲染组内的所有子元素
-      if (element.elements && Array.isArray(element.elements)) {
-        element.elements.forEach((childElement) => {
-          const childCopy = JSON.parse(JSON.stringify(childElement))
-          const childEl = this.createElementByType(childCopy)
-          if (childEl) {
-            innerContainer.appendChild(childEl)
-          }
-        })
-      }
-
-      groupContainer.appendChild(innerContainer)
-      return groupContainer
-    },
-    // 递归调整元素位置
-    adjustElementPosition(element, parentElement) {
-      // 创建深拷贝，但保留特殊属性的引用
-      const adjustedElement = JSON.parse(JSON.stringify(element))
-
-      // 调整位置为相对于父组合元素的位置
-      adjustedElement.top = element.top - parentElement.top
-      adjustedElement.left = element.left - parentElement.left
-
-      // 恢复特殊属性的引用
-      const specialProps = [
-        "src",
-        "blob",
-        "fill",
-        "text",
-        "path",
-        "elements",
-        "borderColor",
-        "borderWidth",
-        "borderType",
-      ]
-      specialProps.forEach((prop) => {
-        if (element[prop] !== undefined) {
-          adjustedElement[prop] = element[prop]
-        }
-      })
-
-      // 如果是组合元素，递归处理其子元素
-      if (element.type === "group" && element.elements) {
-        adjustedElement.elements = element.elements.map((childElement) =>
-          this.adjustElementPosition(childElement, {
-            top: element.top,
-            left: element.left,
-          })
-        )
-      }
-
-      return adjustedElement
-    },
-    // 创建图像元素
-    createImageElement(element) {
-      const img = document.createElement("img")
-      img.src = element.src
-      img.style.width = element.width + "px"
-      img.style.height = element.height + "px"
-      img.style.objectFit = "cover" // 保持图像的宽高比并填充容器
-      img.style.position = "absolute"
-      img.style.top = `${element.top}px`
-      img.style.left = `${element.left}px`
-      img.style.zIndex = element.order
-
-      return img
-    },
-
-    // 创建视频元素
-    createVideoElement(element) {
-      const el = document.createElement("video")
-      el.src = element.blob
-      el.controls = true
-      el.style.width = element.width + "px"
-      el.style.height = element.height + "px"
-      el.style.position = "absolute"
-      el.style.top = element.top + "px"
-      el.style.left = element.left + "px"
-      el.style.zIndex = element.order
-      return el
-    },
-
-    // 创建音频元素
-    createAudioElement(element) {
-      const el = document.createElement("audio")
-      el.src = element.blob
-      el.controls = true
-      el.style.height = element.height + "px"
-      el.style.position = "absolute"
-      el.style.top = element.top + "px"
-      el.style.left = element.left + "px"
-      el.style.zIndex = element.order
-      return el
-    },
-
-    // 创建形状元素
-    createShapeElement(element) {
-      const el = document.createElement("div")
-      el.style.position = "absolute"
-      el.style.top = element.top + "px"
-      el.style.left = element.left + "px"
-      el.style.width = element.width + "px"
-      el.style.height = element.height + "px"
-      el.style.zIndex = element.order
-      el.style.overflow = "visible"
-      if (element.height === 0) {
-        // 如果高度为0，直接在div上绘制边框
-        el.style.borderTop = `${element.borderWidth || 1}px ${
-          element.borderType || "solid"
-        } ${element.borderColor || "#000"}`
-      }
-      // 使用SVG绘制形状
-      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
-      svg.setAttribute("width", "100%")
-      svg.setAttribute("height", "100%")
-      svg.setAttribute("viewBox", `0 0 ${element.width} ${element.height}`)
-      svg.style.overflow = "visible"
-      const setBackground = (element, shape) => {
-        if (element.fill && element.fill.type) {
-          // 设置填充色
-          if (element.fill.type === "color") {
-            shape.setAttribute("fill", element.fill.value || "transparent")
-          } else if (element.fill.type === "gradient") {
-            // 渐变填充
-            const { colors, path, rot } = element.fill.value
-
-            if (colors && colors.length >= 2) {
-              const gradientType = path === "rect" ? "linear" : "radial"
-              const gradientAngle =
-                gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
-
-              let gradientString = `${gradientType}-gradient(`
-              if (gradientType === "linear") {
-                gradientString += `${gradientAngle}deg, `
-              }
-
-              colors.forEach((color, i) => {
-                gradientString += `${color.color} ${color.pos}${
-                  i < colors.length - 1 ? ", " : ""
-                }`
-              })
-              gradientString += ")"
-
-              // 创建渐变定义
-              const gradientDef = document.createElementNS(
-                "http://www.w3.org/2000/svg",
-                "defs"
-              )
-              const gradientEl = document.createElementNS(
-                "http://www.w3.org/2000/svg",
-                gradientType === "linear" ? "linearGradient" : "radialGradient"
-              )
-              const gradientId = `gradient-${Date.now()}-${Math.random()
-                .toString(36)
-                .substr(2, 9)}`
-              gradientEl.setAttribute("id", gradientId)
-
-              // 设置渐变属性
-              if (gradientType === "linear") {
-                gradientEl.setAttribute(
-                  "gradientTransform",
-                  `rotate(${gradientAngle})`
-                )
-              }
-
-              // 添加渐变色标
-              colors.forEach((color) => {
-                const stop = document.createElementNS(
-                  "http://www.w3.org/2000/svg",
-                  "stop"
-                )
-                stop.setAttribute("offset", color.pos)
-                stop.setAttribute("stop-color", color.color)
-                gradientEl.appendChild(stop)
-              })
-
-              gradientDef.appendChild(gradientEl)
-              svg.appendChild(gradientDef)
-
-              // 应用渐变
-              shape.setAttribute("fill", `url(#${gradientId})`)
-            }
-          } else if (element.fill.type === "image") {
-            // 创建图案填充
-            const pattern = document.createElementNS(
-              "http://www.w3.org/2000/svg",
-              "pattern"
-            )
-            const patternId = `pattern-${Date.now()}-${Math.random()
-              .toString(36)
-              .substr(2, 9)}`
-            pattern.setAttribute("id", patternId)
-            pattern.setAttribute("patternUnits", "userSpaceOnUse")
-            pattern.setAttribute("width", "100%")
-            pattern.setAttribute("height", "100%")
-
-            // 创建图片元素
-            const image = document.createElementNS(
-              "http://www.w3.org/2000/svg",
-              "image"
-            )
-            image.setAttribute("width", "100%")
-            image.setAttribute("height", "100%")
-            image.setAttribute("preserveAspectRatio", "xMidYMid slice")
-            image.setAttributeNS(
-              "http://www.w3.org/1999/xlink",
-              "href",
-              element.fill.value.picBase64
-            )
-
-            pattern.appendChild(image)
-
-            // 添加pattern到defs
-            const defs = document.createElementNS(
-              "http://www.w3.org/2000/svg",
-              "defs"
-            )
-            defs.appendChild(pattern)
-            svg.appendChild(defs)
-
-            // 应用图案填充
-            shape.setAttribute("fill", `url(#${patternId})`)
-          } else {
-            shape.setAttribute("fill", "transparent")
-          }
-        } else {
-          shape.setAttribute("fill", "#ffffff00")
-        }
-      }
-      // 根据形状类型创建不同的SVG元素
-      switch (element.shapType) {
-        case "roundRect":
-          const radius = Math.min(element.width, element.height) * 0.1
-          const roundRect = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "rect"
-          )
-          roundRect.setAttribute("x", 0)
-          roundRect.setAttribute("y", 0)
-          roundRect.setAttribute("width", element.width)
-          roundRect.setAttribute("height", element.height)
-          roundRect.setAttribute("rx", radius)
-          roundRect.setAttribute("ry", radius)
-
-          // 设置填充色
-          setBackground(element, roundRect)
-          // 设置边框
-          if (element.borderWidth > 0) {
-            roundRect.setAttribute("stroke", element.borderColor || "#000")
-            roundRect.setAttribute("stroke-width", element.borderWidth || 1)
-            roundRect.setAttribute("stroke-linejoin", "round") // 设置连接处为圆角
-            roundRect.setAttribute("vector-effect", "non-scaling-stroke") // 防止边框宽度变形
-            roundRect.setAttribute("shape-rendering", "geometricPrecision") // 提高渲染精度
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                roundRect.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                roundRect.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                roundRect.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(roundRect)
-          break
-        case "snip1Rect":
-          // 使用path元素绘制剪去单角的矩形
-          const snip1Rect = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 计算剪角的大小，通常为矩形较短边的20%
-          const snipSize = Math.min(element.width, element.height) * 0.35
-
-          // 绘制路径：从左上角开始，顺时针方向，右上角被剪去
-          snip1Rect.setAttribute(
-            "d",
-            `M0,0 ` +
-              `L${element.width - snipSize},0 ` +
-              `L${element.width},${snipSize} ` +
-              `L${element.width},${element.height} ` +
-              `L0,${element.height} ` +
-              `Z`
-          )
-
-          // 设置填充色
-          setBackground(element, snip1Rect)
-          // 设置边框
-          if (element.borderWidth > 0) {
-            snip1Rect.setAttribute("stroke", element.borderColor || "#000")
-            snip1Rect.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                snip1Rect.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                snip1Rect.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                snip1Rect.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-          svg.appendChild(snip1Rect)
-          break
-        case "snip2SameRect":
-          // 使用path元素绘制剪去四个角的矩形
-          const snip2SameRect = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 计算剪角的大小，通常为矩形较短边的20%
-          const snip2Size = Math.min(element.width, element.height) * 0.35
-
-          // 绘制路径：从左上角开始，顺时针方向，剪去四个角
-          snip2SameRect.setAttribute(
-            "d",
-            `M${snip2Size},0 ` +
-              `L${element.width - snip2Size},0 ` +
-              `L${element.width},${snip2Size} ` +
-              `L${element.width},${element.height - snip2Size} ` +
-              `L${element.width - snip2Size},${element.height} ` +
-              `L${snip2Size},${element.height} ` +
-              `L0,${element.height - snip2Size} ` +
-              `L0,${snip2Size} ` +
-              `Z`
-          )
-
-          // 设置填充色
-          setBackground(element, snip2SameRect)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            snip2SameRect.setAttribute("stroke", element.borderColor || "#000")
-            snip2SameRect.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                snip2SameRect.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                snip2SameRect.setAttribute("stroke-dasharray", "2, 2")
-                snip2SameRect.setAttribute("stroke-linecap", "round")
-              } else if (element.borderType === "dashed") {
-                snip2SameRect.setAttribute("stroke-dasharray", "6, 3")
-              }
-            }
-
-            // 添加这些属性以确保边框正确渲染
-            snip2SameRect.setAttribute("vector-effect", "non-scaling-stroke")
-            snip2SameRect.setAttribute("shape-rendering", "geometricPrecision")
-          }
-
-          svg.appendChild(snip2SameRect)
-          break
-        case "line":
-          // 创建直线连接符
-          const line = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "line"
-          )
-          // 设置SVG的最小高度为1px
-          const svgHeight = element.height > 0 ? element.height : 1
-          svg.setAttribute("height", svgHeight + "px")
-
-          // 设置线条的起点和终点
-          line.setAttribute("x1", 0)
-          line.setAttribute("y1", 0)
-          line.setAttribute("x2", element.width)
-          line.setAttribute("y2", svgHeight)
-
-          // 确保边框颜色和宽度被正确设置
-          line.setAttribute("stroke", element.borderColor || "#000")
-          line.setAttribute("stroke-width", element.borderWidth || 1)
-
-          // 处理虚线样式
-          if (
-            element.borderType === "dotted" ||
-            element.borderType === "dashed"
-          ) {
-            if (element.borderStrokeDasharray) {
-              line.setAttribute(
-                "stroke-dasharray",
-                element.borderStrokeDasharray
-              )
-            } else if (element.borderType === "dotted") {
-              line.setAttribute("stroke-dasharray", "2, 2")
-              line.setAttribute("stroke-linecap", "round") // 添加圆角端点使点线更明显
-            } else if (element.borderType === "dashed") {
-              line.setAttribute("stroke-dasharray", "6, 3")
-            }
-          }
-
-          // 确保线条正确渲染
-          line.setAttribute("vector-effect", "non-scaling-stroke") // 防止缩放影响线条宽度
-          svg.appendChild(line)
-          break
-        case "snip2DiagRect":
-          // 使用path元素绘制剪去右上角和左下角的矩形
-          const snip2DiagRect = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 计算剪角的大小，通常为矩形较短边的35%
-          const snipDiagSize = Math.min(element.width, element.height) * 0.35
-
-          // 绘制路径：从左上角开始，顺时针方向，右上角和左下角被剪去
-          snip2DiagRect.setAttribute(
-            "d",
-            `M0,0 ` +
-              `L${element.width - snipDiagSize},0 ` +
-              `L${element.width},${snipDiagSize} ` +
-              `L${element.width},${element.height} ` +
-              `L${snipDiagSize},${element.height} ` +
-              `L0,${element.height - snipDiagSize} ` +
-              `Z`
-          )
-
-          // 设置填充色
-          setBackground(element, snip2DiagRect)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            snip2DiagRect.setAttribute("stroke", element.borderColor || "#000")
-            snip2DiagRect.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                snip2DiagRect.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                snip2DiagRect.setAttribute("stroke-dasharray", "2, 2")
-                snip2DiagRect.setAttribute("stroke-linecap", "round")
-              } else if (element.borderType === "dashed") {
-                snip2DiagRect.setAttribute("stroke-dasharray", "6, 3")
-              }
-            }
-
-            // 添加这些属性以确保边框正确渲染
-            snip2DiagRect.setAttribute("vector-effect", "non-scaling-stroke")
-            snip2DiagRect.setAttribute("shape-rendering", "geometricPrecision")
-          }
-
-          svg.appendChild(snip2DiagRect)
-          break
-        case "snipRoundRect":
-          const snipRoundRect = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          // 计算剪切大小和圆角大小
-          const snipSize2 = Math.min(element.width, element.height) * 0.4
-          const roundSize = Math.min(element.width, element.height) * 0.5
-
-          // 绘制路径：从左上角开始，顺时针方向，左上为圆角，右上为剪切角
-          snipRoundRect.setAttribute(
-            "d",
-            `M${roundSize},0 ` +
-              `L${element.width - snipSize2},0 ` +
-              `L${element.width},${snipSize2} ` +
-              `L${element.width},${element.height} ` +
-              `L0,${element.height} ` +
-              `L0,${roundSize} ` +
-              `A${roundSize},${roundSize} 0 0,1 ${roundSize},0 ` +
-              `Z`
-          )
-
-          // 设置填充色
-          setBackground(element, snipRoundRect)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            snipRoundRect.setAttribute("stroke", element.borderColor || "#000")
-            snipRoundRect.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                snipRoundRect.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                snipRoundRect.setAttribute("stroke-dasharray", "2, 2")
-                snipRoundRect.setAttribute("stroke-linecap", "round")
-              } else if (element.borderType === "dashed") {
-                snipRoundRect.setAttribute("stroke-dasharray", "6, 3")
-              }
-            }
-
-            snipRoundRect.setAttribute("vector-effect", "non-scaling-stroke")
-            snipRoundRect.setAttribute("shape-rendering", "geometricPrecision")
-          }
-
-          svg.appendChild(snipRoundRect)
-          break
-        case "round1Rect":
-          const round1Rect = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          // 计算圆角大小
-          const round1Size = Math.min(element.width, element.height) * 0.5
-
-          // 绘制路径：从左上角开始，顺时针方向，右上角为圆角
-          round1Rect.setAttribute(
-            "d",
-            `M0,0 ` +
-              `L${element.width - round1Size},0 ` +
-              `Q${element.width},0 ${element.width},${round1Size} ` +
-              `L${element.width},${element.height} ` +
-              `L0,${element.height} ` +
-              `Z`
-          )
-
-          // 设置填充色
-          setBackground(element, round1Rect)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            round1Rect.setAttribute("stroke", element.borderColor || "#000")
-            round1Rect.setAttribute("stroke-width", element.borderWidth || 1)
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                round1Rect.setAttribute("stroke-dasharray", "40,15,5,15")
-              } else if (element.borderType === "dotted") {
-                round1Rect.setAttribute("stroke-dasharray", "2, 2")
-                round1Rect.setAttribute("stroke-linecap", "round")
-              } else if (element.borderType === "dashed") {
-                round1Rect.setAttribute("stroke-dasharray", "6, 3")
-              }
-            }
-
-            round1Rect.setAttribute("vector-effect", "non-scaling-stroke")
-            round1Rect.setAttribute("shape-rendering", "geometricPrecision")
-          }
-
-          svg.appendChild(round1Rect)
-          break
-        case "ellipse":
-        case "circle":
-          const ellipse = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "ellipse"
-          )
-          ellipse.setAttribute("cx", element.width / 2)
-          ellipse.setAttribute("cy", element.height / 2)
-          ellipse.setAttribute("rx", element.width / 2)
-          ellipse.setAttribute("ry", element.height / 2)
-
-          // 设置填充色
-          setBackground(element, ellipse)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            ellipse.setAttribute("stroke", element.borderColor || "#000")
-            ellipse.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                ellipse.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                ellipse.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                ellipse.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(ellipse)
-          break
-        case "round2SameRect":
-          const round2SameRect = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          // 计算圆角大小
-          const round2Size = Math.min(element.width, element.height) * 0.5
-
-          // 绘制路径：从左上角开始，顺时针方向，左上和右上为圆角
-          round2SameRect.setAttribute(
-            "d",
-            `M${round2Size},0 ` +
-              `L${element.width - round2Size},0 ` +
-              `Q${element.width},0 ${element.width},${round2Size} ` +
-              `L${element.width},${element.height} ` +
-              `L0,${element.height} ` +
-              `L0,${round2Size} ` +
-              `Q0,0 ${round2Size},0 ` +
-              `Z`
-          )
-
-          // 设置填充色
-          setBackground(element, round2SameRect)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            round2SameRect.setAttribute("stroke", element.borderColor || "#000")
-            round2SameRect.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                round2SameRect.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                round2SameRect.setAttribute("stroke-dasharray", "2, 2")
-                round2SameRect.setAttribute("stroke-linecap", "round")
-              } else if (element.borderType === "dashed") {
-                round2SameRect.setAttribute("stroke-dasharray", "6, 3")
-              }
-            }
-
-            round2SameRect.setAttribute("vector-effect", "non-scaling-stroke")
-            round2SameRect.setAttribute("shape-rendering", "geometricPrecision")
-          }
-
-          svg.appendChild(round2SameRect)
-          break
-        case "round2DiagRect":
-          const round2DiagRect = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          // 计算圆角大小
-          const round2DiagSize = Math.min(element.width, element.height) * 0.5
-
-          // 绘制路径：从左上角开始，顺时针方向，左上和右下为圆角
-          round2DiagRect.setAttribute(
-            "d",
-            `M${round2DiagSize},0 ` +
-              `L${element.width},0 ` +
-              `L${element.width},${element.height - round2DiagSize} ` +
-              `Q${element.width},${element.height} ${
-                element.width - round2DiagSize
-              },${element.height} ` +
-              `L0,${element.height} ` +
-              `L0,${round2DiagSize} ` +
-              `Q0,0 ${round2DiagSize},0 ` +
-              `Z`
-          )
-
-          // 设置填充色
-          setBackground(element, round2DiagRect)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            round2DiagRect.setAttribute("stroke", element.borderColor || "#000")
-            round2DiagRect.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                round2DiagRect.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                round2DiagRect.setAttribute("stroke-dasharray", "2, 2")
-                round2DiagRect.setAttribute("stroke-linecap", "round")
-              } else if (element.borderType === "dashed") {
-                round2DiagRect.setAttribute("stroke-dasharray", "6, 3")
-              }
-            }
-
-            round2DiagRect.setAttribute("vector-effect", "non-scaling-stroke")
-            round2DiagRect.setAttribute("shape-rendering", "geometricPrecision")
-          }
-
-          svg.appendChild(round2DiagRect)
-          break
-        case "triangle":
-          const triangle = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          triangle.setAttribute(
-            "points",
-            `${element.width / 2},0 ${element.width},${element.height} 0,${
-              element.height
-            }`
-          )
-
-          // 设置填充色
-          setBackground(element, triangle)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            triangle.setAttribute("stroke", element.borderColor || "#000")
-            triangle.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                triangle.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                triangle.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                triangle.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(triangle)
-          break
-        case "arc":
-          const arc = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 计算弧形的参数
-          const arcRadius = Math.min(element.width, element.height) / 2
-
-          // 绘制弧形路径
-          arc.setAttribute(
-            "d",
-            `M${arcRadius},0 ` +
-              `A${arcRadius},${arcRadius} 0 1 1 ${arcRadius * 0.15},${
-                arcRadius * 0.5
-              }`
-          )
-
-          // 设置填充色
-          arc.setAttribute("fill", "transparent")
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            arc.setAttribute("stroke", element.borderColor || "#000")
-            arc.setAttribute("stroke-width", element.borderWidth || 0.5)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                arc.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                arc.setAttribute("stroke-dasharray", "2, 2")
-                arc.setAttribute("stroke-linecap", "round")
-              } else if (element.borderType === "dashed") {
-                arc.setAttribute("stroke-dasharray", "6, 3")
-              }
-            }
-
-            arc.setAttribute("vector-effect", "non-scaling-stroke")
-            arc.setAttribute("shape-rendering", "geometricPrecision")
-          } else {
-            arc.setAttribute("stroke", element.borderColor || "#000")
-            arc.setAttribute("stroke-width", 0.5)
-          }
-
-          svg.appendChild(arc)
-          break
-        case "custom":
-          const customPath = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 直接使用传入的 path 数据
-          customPath.setAttribute("d", element.path || "")
-
-          // 设置填充色
-          setBackground(element, customPath)
-          // 设置边框
-          if (element.borderWidth > 0) {
-            customPath.setAttribute("stroke", element.borderColor || "#000")
-            customPath.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                customPath.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                customPath.setAttribute("stroke-dasharray", "2, 2")
-                customPath.setAttribute("stroke-linecap", "round")
-              } else if (element.borderType === "dashed") {
-                customPath.setAttribute("stroke-dasharray", "6, 3")
-              }
-            }
-
-            customPath.setAttribute("vector-effect", "non-scaling-stroke")
-            customPath.setAttribute("shape-rendering", "geometricPrecision")
-          }
-
-          svg.appendChild(customPath)
-          break
-        case "teardrop":
-          const teardrop = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 计算泪珠形状的参数
-          const tdCenterX = element.width / 2
-          const tdCenterY = element.height / 2
-          const tdRadiusX = element.width / 2
-          const tdRadiusY = element.height / 2
-
-          // 使用相对比例计算控制点
-          teardrop.setAttribute(
-            "d",
-            `M${tdCenterX * 2} ${tdCenterY} ` +
-              `A ${tdRadiusX} ${tdRadiusY} 0 1 1 ${tdCenterX} 0 ` +
-              `Q${tdCenterX * 1.7},0 ${tdCenterX * 2.1},${-tdCenterY * 0.1} ` +
-              `Q${tdCenterX * 2},${tdCenterY * 0.29} ${
-                tdCenterX * 2
-              },${tdCenterY}`
-          )
-
-          // 设置填充色
-          setBackground(element, teardrop)
-
-          // 设置边框样式
-          if (element.borderWidth > 0) {
-            teardrop.setAttribute("stroke", element.borderColor || "#000")
-            teardrop.setAttribute("stroke-width", element.borderWidth || 1)
-            teardrop.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              // ... 原有的虚线边框处理代码 ...
-            }
-          }
-
-          svg.appendChild(teardrop)
-          break
-        case "decagon":
-          const decagon = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-
-          // 计算十边形的顶点
-          let decagonPoints = ""
-          for (let i = 0; i < 10; i++) {
-            const angle = (i * 2 * Math.PI) / 10 - Math.PI / 2 // 从顶部开始
-            const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
-            const y =
-              element.height / 2 + (element.height / 2) * Math.sin(angle)
-            decagonPoints += `${x},${y} `
-          }
-          decagon.setAttribute("points", decagonPoints.trim())
-
-          // 设置填充色
-          setBackground(element, decagon)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            decagon.setAttribute("stroke", element.borderColor || "#000")
-            decagon.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                decagon.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                decagon.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                decagon.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(decagon)
-          break
-        case "pentagon":
-          const pentagon = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          pentagon.setAttribute(
-            "points",
-            `${element.width / 2},0 ${element.width},${
-              element.height * 0.38
-            } ` +
-              `${element.width * 0.82},${element.height} ${
-                element.width * 0.18
-              },${element.height} ` +
-              `0,${element.height * 0.38}`
-          )
-
-          // 设置填充色
-          setBackground(element, pentagon)
-          // 设置边框
-          if (element.borderWidth > 0) {
-            pentagon.setAttribute("stroke", element.borderColor || "#000")
-            pentagon.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                pentagon.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                pentagon.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                pentagon.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(pentagon)
-          break
-        case "pie":
-          const pie = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 使用提供的路径数据，但保留元素的宽高比例
-          const centerX = element.width / 2
-          const centerY = element.height / 2
-          const radius2 = Math.min(element.width, element.height) / 2
-
-          // 绘制饼图，使用类似提供的路径数据
-          pie.setAttribute(
-            "d",
-            `M${centerX},${centerY} ` +
-              `L${centerX * 1.85},${centerY * 1.52} ` +
-              `A${radius2},${radius2} 0 1,1 ${centerX * 1.56},${
-                centerY * 0.17
-              } ` +
-              `Z`
-          )
-
-          // 设置填充色
-          setBackground(element, pie)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            pie.setAttribute("stroke", element.borderColor || "#000")
-            pie.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                pie.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                pie.setAttribute("stroke-dasharray", "2, 2")
-                pie.setAttribute("stroke-linecap", "round")
-              } else if (element.borderType === "dashed") {
-                pie.setAttribute("stroke-dasharray", "6, 3")
-              }
-            }
-
-            pie.setAttribute("vector-effect", "non-scaling-stroke")
-            pie.setAttribute("shape-rendering", "geometricPrecision")
-          }
-
-          svg.appendChild(pie)
-          break
-        case "chord":
-          const chord = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 计算弦形的参数
-          const chordRadiusX = element.width * 0.4
-          const chordRadiusY = element.height * 0.4
-          // 绘制弦形 - 使用更大的圆弧和不同的起始/结束点
-          chord.setAttribute(
-            "d",
-            `M${element.width * 0.4},${element.height * 0.9} ` +
-              `A ${chordRadiusX} ${chordRadiusY} 0 1 1 ${element.width * 0.8},${
-                element.height * 0.5
-              } ` +
-              `Z`
-          )
-
-          // 设置填充色
-          setBackground(element, chord)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            chord.setAttribute("stroke", element.borderColor || "#000")
-            chord.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                chord.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                chord.setAttribute("stroke-dasharray", "2, 2")
-                chord.setAttribute("stroke-linecap", "round")
-              } else if (element.borderType === "dashed") {
-                chord.setAttribute("stroke-dasharray", "6, 3")
-              }
-            }
-
-            chord.setAttribute("vector-effect", "non-scaling-stroke")
-            chord.setAttribute("shape-rendering", "geometricPrecision")
-          }
-
-          svg.appendChild(chord)
-          break
-        case "heptagon":
-          const heptagon = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-
-          // 计算七边形的顶点
-          let heptagonPoints = ""
-          for (let i = 0; i < 7; i++) {
-            const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2 // 从顶部开始
-            const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
-            const y =
-              element.height / 2 + (element.height / 2) * Math.sin(angle)
-            heptagonPoints += `${x},${y} `
-          }
-          heptagon.setAttribute("points", heptagonPoints.trim())
-
-          // 设置填充色
-          setBackground(element, heptagon)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            heptagon.setAttribute("stroke", element.borderColor || "#000")
-            heptagon.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                heptagon.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                heptagon.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                heptagon.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(heptagon)
-          break
-        case "hexagon":
-          const hexagon = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          hexagon.setAttribute(
-            "points",
-            `${element.width * 0.25},0 ${element.width * 0.75},0 ${
-              element.width
-            },${element.height * 0.5} ` +
-              `${element.width * 0.75},${element.height} ${
-                element.width * 0.25
-              },${element.height} 0,${element.height * 0.5}`
-          )
-
-          // 设置填充色
-          setBackground(element, hexagon)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            hexagon.setAttribute("stroke", element.borderColor || "#000")
-            hexagon.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                hexagon.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                hexagon.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                hexagon.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(hexagon)
-          break
-
-        case "octagon":
-          const octagon = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          octagon.setAttribute(
-            "points",
-            `${element.width * 0.3},0 ${element.width * 0.7},0 ${
-              element.width
-            },${element.height * 0.3} ` +
-              `${element.width},${element.height * 0.7} ${
-                element.width * 0.7
-              },${element.height} ` +
-              `${element.width * 0.3},${element.height} 0,${
-                element.height * 0.7
-              } 0,${element.height * 0.3}`
-          )
-
-          // 设置填充色
-          setBackground(element, octagon)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            octagon.setAttribute("stroke", element.borderColor || "#000")
-            octagon.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                octagon.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                octagon.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                octagon.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(octagon)
-          break
-
-        case "trapezoid":
-          const trapezoid = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          trapezoid.setAttribute(
-            "points",
-            `${element.width * 0.2},0 ${element.width * 0.8},0 ${
-              element.width
-            },${element.height} 0,${element.height}`
-          )
-
-          // 设置填充色
-          setBackground(element, trapezoid)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            trapezoid.setAttribute("stroke", element.borderColor || "#000")
-            trapezoid.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                trapezoid.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                trapezoid.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                trapezoid.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(trapezoid)
-          break
-
-        case "diamond":
-          const diamond = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          diamond.setAttribute(
-            "points",
-            `${element.width / 2},0 ${element.width},${element.height / 2} ${
-              element.width / 2
-            },${element.height} 0,${element.height / 2}`
-          )
-
-          // 设置填充色
-          setBackground(element, diamond)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            diamond.setAttribute("stroke", element.borderColor || "#000")
-            diamond.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                diamond.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                diamond.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                diamond.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(diamond)
-          break
-        case "dodecagon":
-          const dodecagon = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-
-          // 计算十二边形的顶点
-          let dodecagonPoints = ""
-          for (let i = 0; i < 12; i++) {
-            const angle = (i * 2 * Math.PI) / 12 - Math.PI / 2 // 从顶部开始
-            const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
-            const y =
-              element.height / 2 + (element.height / 2) * Math.sin(angle)
-            dodecagonPoints += `${x},${y} `
-          }
-          dodecagon.setAttribute("points", dodecagonPoints.trim())
-
-          // 设置填充色
-          setBackground(element, dodecagon)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            dodecagon.setAttribute("stroke", element.borderColor || "#000")
-            dodecagon.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                dodecagon.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                dodecagon.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                dodecagon.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(dodecagon)
-          break
-        case "halfFrame":
-          // 创建外框和内框
-          const outerRect2 = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          const innerRect2 = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 计算内框的边距
-          const frameWidth2 = element.width / 9
-
-          // 绘制外框的左边和上边
-          outerRect2.setAttribute(
-            "d",
-            `M0,${element.height} L0,0 L${element.width},0`
-          )
-
-          // 绘制内框的左边和上边，注意起点位置调整
-          innerRect2.setAttribute(
-            "d",
-            `M${frameWidth2},${element.height - frameWidth2} ` +
-              `L${frameWidth2},${frameWidth2} ` +
-              `L${element.width - frameWidth2},${frameWidth2}`
-          )
-
-          // 设置填充色
-          if (element.fill && element.fill.type === "color") {
-            // 创建一个填充用的路径
-            const fillPath = document.createElementNS(
-              "http://www.w3.org/2000/svg",
-              "path"
-            )
-            fillPath.setAttribute(
-              "d",
-              `M${frameWidth2},${frameWidth2} ` +
-                `L${element.width - frameWidth2},${frameWidth2} ` +
-                `L${element.width},0 ` +
-                `L0,0 ` +
-                `L0,${element.height} ` +
-                `L${frameWidth2},${element.height - frameWidth2} Z`
-            )
-            fillPath.setAttribute("fill", element.fill.value || "transparent")
-            svg.appendChild(fillPath)
-
-            outerRect2.setAttribute("fill", "none")
-            innerRect2.setAttribute("fill", "none")
-          } else {
-            outerRect2.setAttribute("fill", "none")
-            innerRect2.setAttribute("fill", "none")
-          }
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            const borderColor = element.borderColor || "#000"
-            const borderWidth = element.borderWidth || 1
-
-            outerRect2.setAttribute("stroke", borderColor)
-            outerRect2.setAttribute("stroke-width", borderWidth)
-            innerRect2.setAttribute("stroke", borderColor)
-            innerRect2.setAttribute("stroke-width", borderWidth)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                const dashArray = element.borderStrokeDasharray
-                outerRect2.setAttribute("stroke-dasharray", dashArray)
-                innerRect2.setAttribute("stroke-dasharray", dashArray)
-              } else if (element.borderType === "dotted") {
-                outerRect2.setAttribute("stroke-dasharray", "1, 3")
-                innerRect2.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                outerRect2.setAttribute("stroke-dasharray", "5, 5")
-                innerRect2.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(outerRect2)
-          svg.appendChild(innerRect2)
-          break
-        case "corner":
-          const corner = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          corner.setAttribute(
-            "d",
-            `M0,0 ` +
-              `L0,${element.height} ` +
-              `L${element.width},${element.height} ` +
-              `L${element.width},${element.height * 0.6} ` +
-              `L${element.width * 0.4},${element.height * 0.6} ` +
-              `L${element.width * 0.4},0 Z`
-          )
-
-          // 设置填充色
-          setBackground(element, corner)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            corner.setAttribute("stroke", element.borderColor || "#000")
-            corner.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                corner.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                corner.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                corner.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(corner)
-          break
-        case "diagStripe":
-          const diagStripe = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 绘制斜纹路径
-          diagStripe.setAttribute(
-            "d",
-            `M${element.width * 0.4},0 ` +
-              `L${element.width},0 ` +
-              `L0,${element.height} ` +
-              `L0,${element.height * 0.4} Z`
-          )
-
-          // 设置填充色
-          setBackground(element, diagStripe)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            diagStripe.setAttribute("stroke", element.borderColor || "#000")
-            diagStripe.setAttribute("stroke-width", element.borderWidth || 1)
-            diagStripe.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                diagStripe.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                diagStripe.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                diagStripe.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(diagStripe)
-          break
-        case "plus":
-          const plus = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          plus.setAttribute(
-            "points",
-            `${element.width * 0.4},0 ` +
-              `${element.width * 0.6},0 ` +
-              `${element.width * 0.6},${element.height * 0.4} ` +
-              `${element.width},${element.height * 0.4} ` +
-              `${element.width},${element.height * 0.6} ` +
-              `${element.width * 0.6},${element.height * 0.6} ` +
-              `${element.width * 0.6},${element.height} ` +
-              `${element.width * 0.4},${element.height} ` +
-              `${element.width * 0.4},${element.height * 0.6} ` +
-              `0,${element.height * 0.6} ` +
-              `0,${element.height * 0.4} ` +
-              `${element.width * 0.4},${element.height * 0.4}`
-          )
-
-          // 设置填充色
-          setBackground(element, plus)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            plus.setAttribute("stroke", element.borderColor || "#000")
-            plus.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                plus.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                plus.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                plus.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(plus)
-          break
-        case "can":
-          const can = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "g"
-          )
-
-          // 创建圆柱体的主体部分
-          const cylinderBody = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          cylinderBody.setAttribute(
-            "d",
-            `M0,${element.height * 0.15} ` +
-              `A${element.width / 2},${element.height * 0.15} 0 0 1 ${
-                element.width
-              },${element.height * 0.15} ` +
-              `V${element.height * 0.85} ` +
-              `A${element.width / 2},${element.height * 0.15} 0 0 1 0,${
-                element.height * 0.85
-              } Z`
-          )
-
-          // 创建顶部椭圆
-          const topEllipse = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "ellipse"
-          )
-          topEllipse.setAttribute("cx", element.width / 2)
-          topEllipse.setAttribute("cy", element.height * 0.15)
-          topEllipse.setAttribute("rx", element.width / 2)
-          topEllipse.setAttribute("ry", element.height * 0.15)
-
-          // 设置填充色
-          setBackground(element, cylinderBody)
-          setBackground(element, topEllipse)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            const borderColor = element.borderColor || "#000"
-            const borderWidth = element.borderWidth || 1
-
-            cylinderBody.setAttribute("stroke", borderColor)
-            cylinderBody.setAttribute("stroke-width", borderWidth)
-            topEllipse.setAttribute("stroke", borderColor)
-            topEllipse.setAttribute("stroke-width", borderWidth)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                const dashArray = element.borderStrokeDasharray
-                cylinderBody.setAttribute("stroke-dasharray", dashArray)
-                topEllipse.setAttribute("stroke-dasharray", dashArray)
-              } else if (element.borderType === "dotted") {
-                cylinderBody.setAttribute("stroke-dasharray", "1, 3")
-                topEllipse.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                cylinderBody.setAttribute("stroke-dasharray", "5, 5")
-                topEllipse.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          can.appendChild(cylinderBody)
-          can.appendChild(topEllipse)
-          svg.appendChild(can)
-          break
-        case "cube":
-          const cube = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "g"
-          )
-
-          // 计算关键点坐标
-          const offset = element.width * 0.2
-          const frontX = offset
-          const frontY = offset
-          const frontW = element.width - offset
-          const frontH = element.height
-
-          // 设置立方体的三个面的路径
-          const frontFace = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          frontFace.setAttribute(
-            "d",
-            `M${frontX},${frontY} ` +
-              `L${frontW},${frontY} ` +
-              `L${frontW},${frontH} ` +
-              `L${frontX},${frontH} Z`
-          )
-
-          const rightFace = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          rightFace.setAttribute(
-            "d",
-            `M${frontW},${frontY} ` +
-              `L${element.width},0 ` +
-              `L${element.width},${element.height - offset} ` +
-              `L${frontW},${frontH} Z`
-          )
-
-          const topFace = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          topFace.setAttribute(
-            "d",
-            `M${frontX},${frontY} ` +
-              `L${frontW - offset - frontX},0 ` + // 修改这里：改为从(0,0)开始
-              `L${element.width - offset},0 ` + // 修改这里：使用 offset 来计算右上角的位置
-              `L${element.width},0 ` +
-              `L${frontW},${frontY} Z`
-          )
-
-          // 设置填充色
-          if (element.fill && element.fill.type === "color") {
-            const fillColor = element.fill.value || "transparent"
-            frontFace.setAttribute("fill", fillColor)
-            rightFace.setAttribute(
-              "fill",
-              this.adjustBrightness(fillColor, 0.8)
-            )
-            topFace.setAttribute("fill", this.adjustBrightness(fillColor, 1.2))
-          } else {
-            frontFace.setAttribute("fill", "transparent")
-            rightFace.setAttribute("fill", "transparent")
-            topFace.setAttribute("fill", "transparent")
-          }
-          // 设置边框
-          if (element.borderWidth > 0) {
-            const borderColor = element.borderColor || "#000"
-            const borderWidth = element.borderWidth || 1
-
-            frontFace.setAttribute("stroke", borderColor)
-            frontFace.setAttribute("stroke-width", borderWidth)
-            rightFace.setAttribute("stroke", borderColor)
-            rightFace.setAttribute("stroke-width", borderWidth)
-            topFace.setAttribute("stroke", borderColor)
-            topFace.setAttribute("stroke-width", borderWidth)
-
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              const dashArray =
-                element.borderStrokeDasharray ||
-                (element.borderType === "dotted" ? "1, 3" : "5, 5")
-              frontFace.setAttribute("stroke-dasharray", dashArray)
-              rightFace.setAttribute("stroke-dasharray", dashArray)
-              topFace.setAttribute("stroke-dasharray", dashArray)
-            }
-          }
-
-          // 按正确的顺序添加面（从后到前）
-          cube.appendChild(rightFace)
-          cube.appendChild(topFace)
-          cube.appendChild(frontFace)
-          svg.appendChild(cube)
-          break
-        case "bevel":
-          const bevel = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "g"
-          )
-
-          // 计算关键点坐标
-          const bevelOffset = element.width * 0.2
-          const smallRectX = bevelOffset
-          const smallRectY = bevelOffset
-          const smallRectW = element.width - 2 * bevelOffset
-          const smallRectH = element.height - 2 * bevelOffset
-
-          // 绘制顶部小矩形
-          const topRect = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "rect"
-          )
-          topRect.setAttribute("x", smallRectX)
-          topRect.setAttribute("y", smallRectY)
-          topRect.setAttribute("width", smallRectW)
-          topRect.setAttribute("height", smallRectH)
-
-          // 绘制四个梯形
-          const topTrapezoid = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          topTrapezoid.setAttribute(
-            "d",
-            `M0,0 L${element.width},0 L${
-              element.width - bevelOffset
-            },${bevelOffset} L${bevelOffset},${bevelOffset} Z`
-          )
-
-          const bottomTrapezoid = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          bottomTrapezoid.setAttribute(
-            "d",
-            `M${bevelOffset},${element.height - bevelOffset} L${
-              element.width - bevelOffset
-            },${element.height - bevelOffset} L${element.width},${
-              element.height
-            } L0,${element.height} Z`
-          )
-
-          const leftTrapezoid = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          leftTrapezoid.setAttribute(
-            "d",
-            `M0,0 L${bevelOffset},${bevelOffset} L${bevelOffset},${
-              element.height - bevelOffset
-            } L0,${element.height} Z`
-          )
-
-          const rightTrapezoid = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          rightTrapezoid.setAttribute(
-            "d",
-            `M${element.width},0 L${element.width},${element.height} L${
-              element.width - bevelOffset
-            },${element.height - bevelOffset} L${
-              element.width - bevelOffset
-            },${bevelOffset} Z`
-          )
-
-          // 设置填充色
-          if (element.fill && element.fill.type === "color") {
-            const fillColor = element.fill.value || "transparent"
-            topRect.setAttribute("fill", fillColor)
-            topTrapezoid.setAttribute(
-              "fill",
-              this.adjustBrightness(fillColor, 1.2)
-            )
-            bottomTrapezoid.setAttribute(
-              "fill",
-              this.adjustBrightness(fillColor, 0.8)
-            )
-            leftTrapezoid.setAttribute(
-              "fill",
-              this.adjustBrightness(fillColor, 0.9)
-            )
-            rightTrapezoid.setAttribute(
-              "fill",
-              this.adjustBrightness(fillColor, 0.7)
-            )
-          } else {
-            topRect.setAttribute("fill", "transparent")
-            topTrapezoid.setAttribute("fill", "transparent")
-            bottomTrapezoid.setAttribute("fill", "transparent")
-            leftTrapezoid.setAttribute("fill", "transparent")
-            rightTrapezoid.setAttribute("fill", "transparent")
-          }
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            const borderColor = element.borderColor || "#000"
-            const borderWidth = element.borderWidth || 1
-            const parts = [
-              topRect,
-              topTrapezoid,
-              bottomTrapezoid,
-              leftTrapezoid,
-              rightTrapezoid,
-            ]
-
-            parts.forEach((part) => {
-              part.setAttribute("stroke", borderColor)
-              part.setAttribute("stroke-width", borderWidth)
-
-              if (
-                element.borderType === "dotted" ||
-                element.borderType === "dashed"
-              ) {
-                const dashArray =
-                  element.borderStrokeDasharray ||
-                  (element.borderType === "dotted" ? "1, 3" : "5, 5")
-                part.setAttribute("stroke-dasharray", dashArray)
-              }
-            })
-          }
-
-          // 按正确的顺序添加面（从后到前）
-          bevel.appendChild(bottomTrapezoid)
-          bevel.appendChild(leftTrapezoid)
-          bevel.appendChild(rightTrapezoid)
-          bevel.appendChild(topTrapezoid)
-          bevel.appendChild(topRect)
-          svg.appendChild(bevel)
-          break
-        case "donut":
-          const donut = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "g"
-          )
-
-          // 外圆
-          const outerCircle = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "circle"
-          )
-          outerCircle.setAttribute("cx", element.width / 2)
-          outerCircle.setAttribute("cy", element.height / 2)
-          outerCircle.setAttribute(
-            "r",
-            Math.min(element.width, element.height) / 2
-          )
-
-          // 内圆
-          const innerCircle = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "circle"
-          )
-          innerCircle.setAttribute("cx", element.width / 2)
-          innerCircle.setAttribute("cy", element.height / 2)
-          innerCircle.setAttribute(
-            "r",
-            Math.min(element.width, element.height) / 4
-          )
-
-          // 设置填充色
-          setBackground(element, outerCircle)
-          innerCircle.setAttribute("fill", "white")
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            const borderColor = element.borderColor || "#000"
-            const borderWidth = element.borderWidth || 1
-
-            outerCircle.setAttribute("stroke", borderColor)
-            outerCircle.setAttribute("stroke-width", borderWidth)
-            innerCircle.setAttribute("stroke", borderColor)
-            innerCircle.setAttribute("stroke-width", borderWidth)
-
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              const dashArray =
-                element.borderStrokeDasharray ||
-                (element.borderType === "dotted" ? "1, 3" : "5, 5")
-              outerCircle.setAttribute("stroke-dasharray", dashArray)
-              innerCircle.setAttribute("stroke-dasharray", dashArray)
-            }
-          }
-
-          donut.appendChild(outerCircle)
-          donut.appendChild(innerCircle)
-          svg.appendChild(donut)
-          break
-        case "noSmoking":
-          const noSmoking = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "g"
-          )
-
-          // 创建路径
-          const path = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          path.setAttribute(
-            "d",
-            "M0,70 A77,70 0 1,1 0,71 Z M123.80284467265982,99.39738105155146 A57.5386,50.5386 0 0 0 45.160427644134444,27.90427466198293 Z M30.197155327340184,40.602618948448544 A57.5386,50.5386 0 0 0 108.83957235586556,112.09572533801708 Z"
-          )
-          path.setAttribute("fill", "rgba(255,217,102,1)")
-          path.setAttribute("stroke", "rgba(23,44,81,1)")
-          path.setAttribute("stroke-width", "1px")
-          path.setAttribute("stroke-dasharray", "")
-          path.setAttribute("stroke-linecap", "butt")
-          path.setAttribute("stroke-linejoin", "round")
-
-          noSmoking.appendChild(path)
-          svg.appendChild(noSmoking)
-          break
-        case "rightArrow":
-          const rightArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          rightArrow.setAttribute(
-            "points",
-            `0,${element.height * 0.3} ${element.width * 0.7},${
-              element.height * 0.3
-            } ` +
-              `${element.width * 0.7},0 ${element.width},${
-                element.height * 0.5
-              } ` +
-              `${element.width * 0.7},${element.height} ${
-                element.width * 0.7
-              },${element.height * 0.7} ` +
-              `0,${element.height * 0.7}`
-          )
-
-          // 设置填充色
-          setBackground(element, rightArrow)
-          // 设置边框
-          if (element.borderWidth > 0) {
-            rightArrow.setAttribute("stroke", element.borderColor || "#000")
-            rightArrow.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                rightArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                rightArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                rightArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(rightArrow)
-          break
-        case "leftArrow":
-          const leftArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          leftArrow.setAttribute(
-            "points",
-            `${element.width},${element.height * 0.3} ${element.width * 0.3},${
-              element.height * 0.3
-            } ` +
-              `${element.width * 0.3},0 0,${element.height * 0.5} ` +
-              `${element.width * 0.3},${element.height} ${
-                element.width * 0.3
-              },${element.height * 0.7} ` +
-              `${element.width},${element.height * 0.7}`
-          )
-
-          // 设置填充色
-          setBackground(element, leftArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            leftArrow.setAttribute("stroke", element.borderColor || "#000")
-            leftArrow.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                leftArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                leftArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                leftArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(leftArrow)
-          break
-        case "upArrow":
-          const upArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          upArrow.setAttribute(
-            "points",
-            `${element.width * 0.3},${element.height} ${element.width * 0.3},${
-              element.height * 0.3
-            } ` +
-              `0,${element.height * 0.3} ${element.width * 0.5},0 ` +
-              `${element.width},${element.height * 0.3} ${
-                element.width * 0.7
-              },${element.height * 0.3} ` +
-              `${element.width * 0.7},${element.height}`
-          )
-
-          // 设置填充色
-          setBackground(element, upArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            upArrow.setAttribute("stroke", element.borderColor || "#000")
-            upArrow.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                upArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                upArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                upArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(upArrow)
-          break
-        case "downArrow":
-          const downArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          downArrow.setAttribute(
-            "points",
-            `${element.width * 0.3},0 ${element.width * 0.3},${
-              element.height * 0.7
-            } ` +
-              `0,${element.height * 0.7} ${element.width * 0.5},${
-                element.height
-              } ` +
-              `${element.width},${element.height * 0.7} ${
-                element.width * 0.7
-              },${element.height * 0.7} ` +
-              `${element.width * 0.7},0`
-          )
-
-          // 设置填充色
-          setBackground(element, downArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            downArrow.setAttribute("stroke", element.borderColor || "#000")
-            downArrow.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                downArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                downArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                downArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(downArrow)
-          break
-        case "leftRightArrow":
-          const leftRightArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          leftRightArrow.setAttribute(
-            "points",
-            `0,${element.height * 0.5} ${element.width * 0.2},${
-              element.height * 0.2
-            } ` +
-              `${element.width * 0.2},${element.height * 0.4} ${
-                element.width * 0.8
-              },${element.height * 0.4} ` +
-              `${element.width * 0.8},${element.height * 0.2} ${
-                element.width
-              },${element.height * 0.5} ` +
-              `${element.width * 0.8},${element.height * 0.8} ${
-                element.width * 0.8
-              },${element.height * 0.6} ` +
-              `${element.width * 0.2},${element.height * 0.6} ${
-                element.width * 0.2
-              },${element.height * 0.8}`
-          )
-
-          // 设置填充色
-          setBackground(element, leftRightArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            leftRightArrow.setAttribute("stroke", element.borderColor || "#000")
-            leftRightArrow.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                leftRightArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                leftRightArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                leftRightArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(leftRightArrow)
-          break
-        case "upDownArrow":
-          const upDownArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          upDownArrow.setAttribute(
-            "points",
-            `${element.width * 0.5},0 ${element.width * 0.3},${
-              element.height * 0.2
-            } ` +
-              `${element.width * 0.4},${element.height * 0.2} ${
-                element.width * 0.4
-              },${element.height * 0.8} ` +
-              `${element.width * 0.3},${element.height * 0.8} ${
-                element.width * 0.5
-              },${element.height} ` +
-              `${element.width * 0.7},${element.height * 0.8} ${
-                element.width * 0.6
-              },${element.height * 0.8} ` +
-              `${element.width * 0.6},${element.height * 0.2} ${
-                element.width * 0.7
-              },${element.height * 0.2}`
-          )
-
-          // 设置填充色
-          setBackground(element, upDownArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            upDownArrow.setAttribute("stroke", element.borderColor || "#000")
-            upDownArrow.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                upDownArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                upDownArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                upDownArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(upDownArrow)
-          break
-        case "quadArrow":
-          const quadArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 计算缩放比例
-          const scale = Math.min(element.width / 167, element.height / 121)
-          const offsetX = (element.width - 167 * scale) / 2
-          const offsetY = (element.height - 121 * scale) / 2
-
-          // 构建路径数据
-          const pathData = `
-            M${offsetX},${60.5 * scale + offsetY}
-            L${27.225 * scale + offsetX},${33.275 * scale + offsetY}
-            L${27.225 * scale + offsetX},${46.8875 * scale + offsetY}
-            L${69.8875 * scale + offsetX},${46.8875 * scale + offsetY}
-            L${69.8875 * scale + offsetX},${27.225 * scale + offsetY}
-            L${56.275 * scale + offsetX},${27.225 * scale + offsetY}
-            L${83.5 * scale + offsetX},${offsetY}
-            L${110.725 * scale + offsetX},${27.225 * scale + offsetY}
-            L${97.1125 * scale + offsetX},${27.225 * scale + offsetY}
-            L${97.1125 * scale + offsetX},${46.8875 * scale + offsetY}
-            L${139.775 * scale + offsetX},${46.8875 * scale + offsetY}
-            L${139.775 * scale + offsetX},${33.275 * scale + offsetY}
-            L${167 * scale + offsetX},${60.5 * scale + offsetY}
-            L${139.775 * scale + offsetX},${87.725 * scale + offsetY}
-            L${139.775 * scale + offsetX},${74.1125 * scale + offsetY}
-            L${97.1125 * scale + offsetX},${74.1125 * scale + offsetY}
-            L${97.1125 * scale + offsetX},${93.775 * scale + offsetY}
-            L${110.725 * scale + offsetX},${93.775 * scale + offsetY}
-            L${83.5 * scale + offsetX},${121 * scale + offsetY}
-            L${56.275 * scale + offsetX},${93.775 * scale + offsetY}
-            L${69.8875 * scale + offsetX},${93.775 * scale + offsetY}
-            L${69.8875 * scale + offsetX},${74.1125 * scale + offsetY}
-            L${27.225 * scale + offsetX},${74.1125 * scale + offsetY}
-            L${27.225 * scale + offsetX},${87.725 * scale + offsetY}
-            Z`
-
-          quadArrow.setAttribute("d", pathData)
-
-          // 设置填充色
-          setBackground(element, quadArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            quadArrow.setAttribute("stroke", element.borderColor || "#000")
-            quadArrow.setAttribute("stroke-width", element.borderWidth || 1)
-            quadArrow.setAttribute("stroke-linecap", "butt")
-            quadArrow.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                quadArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                quadArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                quadArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(quadArrow)
-          break
-        case "leftRightUpArrow":
-          const leftRightUpArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 计算缩放比例
-          const scale2 = Math.min(element.width / 167, element.height / 121)
-          const offsetX2 = (element.width - 167 * scale2) / 2
-          const offsetY2 = (element.height - 121 * scale2) / 2
-
-          // 构建路径数据
-          const pathData2 = `
-            M${offsetX2},${60.5 * scale2 + offsetY2}
-            L${27.225 * scale2 + offsetX2},${33.275 * scale2 + offsetY2}
-            L${27.225 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
-            L${69.8875 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
-            L${69.8875 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
-            L${56.275 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
-            L${83.5 * scale2 + offsetX2},${offsetY2}
-            L${110.725 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
-            L${97.1125 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
-            L${97.1125 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
-            L${139.775 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
-            L${139.775 * scale2 + offsetX2},${33.275 * scale2 + offsetY2}
-            L${167 * scale2 + offsetX2},${60.5 * scale2 + offsetY2}
-            L${139.775 * scale2 + offsetX2},${87.725 * scale2 + offsetY2}
-            L${139.775 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
-            L${97.1125 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
-            L${69.8875 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
-            L${27.225 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
-            L${27.225 * scale2 + offsetX2},${87.725 * scale2 + offsetY2}
-            Z`
-
-          leftRightUpArrow.setAttribute("d", pathData2)
-
-          // 设置填充色
-          setBackground(element, leftRightUpArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            leftRightUpArrow.setAttribute(
-              "stroke",
-              element.borderColor || "#000"
-            )
-            leftRightUpArrow.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-            leftRightUpArrow.setAttribute("stroke-linecap", "butt")
-            leftRightUpArrow.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                leftRightUpArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                leftRightUpArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                leftRightUpArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(leftRightUpArrow)
-          break
-        case "bentArrow":
-          const bentArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 构建路径数据
-          const pathData3 = `
-            M0,${element.height * 0.88}
-            L0,${element.height * 0.495}
-            A${element.width * 0.385} ${element.height * 0.385} 0 0 1 ${
-            element.width * 0.385
-          } ${element.height * 0.11}
-            L${element.width * 0.67},${element.height * 0.11}
-            L${element.width * 0.67},0
-            L${element.width * 0.89},${element.height * 0.22}
-            L${element.width * 0.67},${element.height * 0.44}
-            L${element.width * 0.67},${element.height * 0.33}
-            L${element.width * 0.385},${element.height * 0.33}
-            A${element.width * 0.165} ${element.height * 0.165} 0 0 0 ${
-            element.width * 0.22
-          } ${element.height * 0.495}
-            L${element.width * 0.22},${element.height * 0.88}
-            Z`
-
-          bentArrow.setAttribute("d", pathData3)
-
-          // 设置填充色
-          setBackground(element, bentArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            bentArrow.setAttribute("stroke", element.borderColor || "#000")
-            bentArrow.setAttribute("stroke-width", element.borderWidth || 1)
-            bentArrow.setAttribute("stroke-linecap", "butt")
-            bentArrow.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                bentArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                bentArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                bentArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(bentArrow)
-          break
-        case "parallelogram":
-          const parallelogram = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          parallelogram.setAttribute(
-            "points",
-            `${element.width * 0.25},0 ${element.width},0 ${
-              element.width * 0.75
-            },${element.height} 0,${element.height}`
-          )
-
-          // 设置填充色
-          setBackground(element, parallelogram)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            parallelogram.setAttribute("stroke", element.borderColor || "#000")
-            parallelogram.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                parallelogram.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                parallelogram.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                parallelogram.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(parallelogram)
-          break
-        case "uturnArrow":
-          const uturnArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 构建路径数据
-          const pathDataUturn = `
-            M0,${element.height * 0.745}
-            L0,${element.height * 0.179375}
-            A${element.width * 0.179375} ${element.height * 0.179375} 0 0 1 ${
-            element.width * 0.179375
-          },0
-            L${element.width * 0.179375},0
-            A${element.width * 0.179375} ${element.height * 0.179375} 0 0 1 ${
-            element.width * 0.359375
-          },${element.height * 0.179375}
-            L${element.width * 0.359375},${element.height * 0.205}
-            L${element.width * 0.41},${element.height * 0.205}
-            L${element.width * 0.3075},${element.height * 0.3075}
-            L${element.width * 0.205},${element.height * 0.205}
-            L${element.width * 0.25625},${element.height * 0.205}
-            L${element.width * 0.25625},${element.height * 0.179375}
-            A${element.width * 0.076875} ${element.height * 0.076875} 0 0 0 ${
-            element.width * 0.179375
-          },${element.height * 0.1025}
-            L${element.width * 0.179375},${element.height * 0.1025}
-            A${element.width * 0.076875} ${element.height * 0.076875} 0 0 0 ${
-            element.width * 0.1025
-          },${element.height * 0.179375}
-            L${element.width * 0.1025},${element.height * 0.745}
-            Z`
-
-          uturnArrow.setAttribute("d", pathDataUturn)
-
-          // 设置填充色
-          setBackground(element, uturnArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            uturnArrow.setAttribute("stroke", element.borderColor || "#000")
-            uturnArrow.setAttribute("stroke-width", element.borderWidth || 1)
-            uturnArrow.setAttribute("stroke-linecap", "butt")
-            uturnArrow.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                uturnArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                uturnArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                uturnArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(uturnArrow)
-          break
-        case "leftUpArrow":
-          const leftUpArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 使用提供的路径数据
-          const pathDataLeftUp = `
-            M0,${element.height * 0.65}
-            L${element.width * 0.15},${element.height * 0.4}
-            L${element.width * 0.15},${element.height * 0.55}
-            L${element.width * 0.5},${element.height * 0.55}
-            L${element.width * 0.5},${element.height * 0.1}
-            L${element.width * 0.35},${element.height * 0.1}
-            L${element.width * 0.65},0
-            L${element.width * 0.85},${element.height * 0.1}
-            L${element.width * 0.75},${element.height * 0.1}
-            L${element.width * 0.75},${element.height * 0.85}
-            L${element.width * 0.15},${element.height * 0.85}
-            L${element.width * 0.15},${element.height * 1}
-            Z`
-
-          leftUpArrow.setAttribute("d", pathDataLeftUp)
-
-          // 设置填充色
-          setBackground(element, leftUpArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            leftUpArrow.setAttribute("stroke", element.borderColor || "#000")
-            leftUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
-            leftUpArrow.setAttribute("stroke-linecap", "butt")
-            leftUpArrow.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                leftUpArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                leftUpArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                leftUpArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(leftUpArrow)
-          break
-        case "bentUpArrow":
-          const bentUpArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 构建路径数据，去掉左侧箭头
-          // 使用提供的路径数据
-          const pathDataBentUp = `
-            M0,${element.height * 0.89}
-            L0,${element.height * 0.7}
-            L${element.width * 0.575},${element.height * 0.7}
-            L${element.width * 0.575},${element.height * 0.2}
-            L${element.width * 0.46},${element.height * 0.2}
-            L${element.width * 0.69},0
-            L${element.width * 0.92},${element.height * 0.2}
-            L${element.width * 0.805},${element.height * 0.2}
-            L${element.width * 0.805},${element.height * 0.89}
-            Z`
-
-          bentUpArrow.setAttribute("d", pathDataBentUp)
-
-          // 设置填充色
-          setBackground(element, bentUpArrow)
-          // 设置边框
-          if (element.borderWidth > 0) {
-            bentUpArrow.setAttribute("stroke", element.borderColor || "#000")
-            bentUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
-            bentUpArrow.setAttribute("stroke-linecap", "butt")
-            bentUpArrow.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                bentUpArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                bentUpArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                bentUpArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(bentUpArrow)
-          break
-        case "curvedRightArrow":
-          const curvedRightArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 使用提供的路径数据
-          const pathDataCurvedRight = `
-            M${element.width},0
-            A${element.width} ${element.height * 0.4} 0 0 0 0 ${
-            element.height * 0.4
-          }
-            L0,${element.height * 0.5}
-            A${element.width} ${element.height * 0.4} 0 0 1 ${element.width} ${
-            element.height * 0.15
-          }
-            Z
-            M0,${element.height * 0.4}
-            A${element.width} ${element.height * 0.4} 0 0 0 ${
-            element.width * 0.8
-          } ${element.height * 0.8}
-            L${element.width * 0.8},${element.height * 0.75}
-            L${element.width},${element.height * 0.875}
-            L${element.width * 0.8},${element.height * 1}
-            L${element.width * 0.8},${element.height * 0.95}
-            A${element.width} ${element.height * 0.4} 0 0 1 0 ${
-            element.height * 0.5
-          }
-            Z`
-
-          curvedRightArrow.setAttribute("d", pathDataCurvedRight)
-
-          // 设置填充色
-          setBackground(element, curvedRightArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            curvedRightArrow.setAttribute(
-              "stroke",
-              element.borderColor || "#000"
-            )
-            curvedRightArrow.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-            curvedRightArrow.setAttribute("stroke-linecap", "butt")
-            curvedRightArrow.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                curvedRightArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                curvedRightArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                curvedRightArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(curvedRightArrow)
-          break
-        case "curvedLeftArrow":
-          const curvedLeftArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 定义左弧形箭头的路径数据
-          const pathDataCurvedLeft = `
-            M0,0
-            A${element.width} ${element.height * 0.4} 0 0 1 ${element.width} ${
-            element.height * 0.4
-          }
-            L${element.width},${element.height * 0.55}
-            A${element.width} ${element.height * 0.4} 0 0 0 0 ${
-            element.height * 0.15
-          }
-            Z
-            M0,${element.height * 0.85}
-            L${element.width * 0.25},${element.height * 0.65}
-            L${element.width * 0.25},${element.height * 0.75}
-            A${element.width} ${element.height * 0.4} 0 0 0 ${element.width} ${
-            element.height * 0.4
-          }
-            L${element.width},${element.height * 0.5}
-            L${element.width},${element.height * 0.5}
-            A${element.width} ${element.height * 0.4} 0 0 1 ${
-            element.width * 0.25
-          } ${element.height * 0.9}
-            L${element.width * 0.25},${element.height}
-            Z`
-
-          curvedLeftArrow.setAttribute("d", pathDataCurvedLeft)
-
-          // 设置填充色
-          setBackground(element, curvedLeftArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            curvedLeftArrow.setAttribute(
-              "stroke",
-              element.borderColor || "#000"
-            )
-            curvedLeftArrow.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-            curvedLeftArrow.setAttribute("stroke-linecap", "butt")
-            curvedLeftArrow.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                curvedLeftArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                curvedLeftArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                curvedLeftArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(curvedLeftArrow)
-          break
-        case "curvedUpArrow":
-          const curvedUpArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 定义上弧形箭头的路径数据
-          const pathDataCurvedUp = `
-            M${element.width * 0.905},0
-            L${element.width * 0.81},${element.height * 0.25}
-            L${element.width * 0.857},${element.height * 0.25}
-            A${element.width * 0.428} ${element.height} 0 0 1 ${
-            element.width * 0.428
-          },${element.height}
-            L${element.width * 0.522},${element.height}
-            A${element.width * 0.428} ${element.height} 0 0 0 ${
-            element.width * 0.952
-          },${element.height * 0.25}
-            L${element.width},${element.height * 0.25}
-            Z
-            M${element.width * 0.094},0
-            L0,0
-            A${element.width * 0.428} ${element.height} 0 0 0 ${
-            element.width * 0.428
-          },${element.height}
-            L${element.width * 0.522},${element.height}
-            A${element.width * 0.428} ${element.height} 0 0 1 ${
-            element.width * 0.094
-          },0
-            Z`
-
-          curvedUpArrow.setAttribute("d", pathDataCurvedUp)
-
-          // 设置填充色
-          setBackground(element, curvedUpArrow)
-          // 设置边框
-          if (element.borderWidth > 0) {
-            curvedUpArrow.setAttribute("stroke", element.borderColor || "#000")
-            curvedUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
-            curvedUpArrow.setAttribute("stroke-linecap", "butt")
-            curvedUpArrow.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                curvedUpArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                curvedUpArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                curvedUpArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(curvedUpArrow)
-          break
-        case "curvedDownArrow":
-          const curvedDownArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 定义下弧形箭头的路径数据
-          const pathDataCurvedDown = `
-            M0,${element.height}
-            L${element.width * 0.16},${element.height}
-            A${element.width * 0.46} ${element.height} 0 0 1 ${
-            element.width * 0.62
-          },0
-            L${element.width * 0.46},0
-            A${element.width * 0.46} ${element.height} 0 0 0 0,${element.height}
-            Z
-            M${element.width},${element.height}
-            L${element.width * 0.84},${element.height * 0.75}
-            L${element.width * 0.92},${element.height * 0.75}
-            A${element.width * 0.46} ${element.height} 0 0 0 ${
-            element.width * 0.46
-          },0
-            L${element.width * 0.62},0
-            A${element.width * 0.46} ${element.height} 0 0 1 ${
-            element.width * 1.08
-          },${element.height * 0.75}
-            L${element.width * 1.16},${element.height * 0.75}
-            Z`
-
-          curvedDownArrow.setAttribute("d", pathDataCurvedDown)
-
-          // 设置填充色
-          setBackground(element, curvedDownArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            curvedDownArrow.setAttribute(
-              "stroke",
-              element.borderColor || "#000"
-            )
-            curvedDownArrow.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-            curvedDownArrow.setAttribute("stroke-linecap", "butt")
-            curvedDownArrow.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                curvedDownArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                curvedDownArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                curvedDownArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(curvedDownArrow)
-          break
-        case "stripedRightArrow":
-          const stripedRightArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "g"
-          )
-
-          // 主箭头部分
-          const mainArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          mainArrow.setAttribute(
-            "d",
-            `M${element.width * 0.062},${element.height * 0.25}
-            L${element.width * 0.8},${element.height * 0.25}
-            L${element.width * 0.8},0
-            L${element.width},${element.height * 0.5}
-            L${element.width * 0.8},${element.height}
-            L${element.width * 0.8},${element.height * 0.75}
-            L${element.width * 0.062},${element.height * 0.75}
-            Z`
-          )
-
-          // 第一条尾部条纹
-          const stripe1 = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          stripe1.setAttribute(
-            "d",
-            `M0,${element.height * 0.25}
-            L${element.width * 0.012},${element.height * 0.25}
-            L${element.width * 0.012},${element.height * 0.75}
-            L0,${element.height * 0.75}
-            Z`
-          )
-
-          // 第二条尾部条纹
-          const stripe2 = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          stripe2.setAttribute(
-            "d",
-            `M${element.width * 0.025},${element.height * 0.25}
-            L${element.width * 0.049},${element.height * 0.25}
-            L${element.width * 0.049},${element.height * 0.75}
-            L${element.width * 0.025},${element.height * 0.75}
-            Z`
-          )
-
-          // 设置填充色
-          setBackground(element, mainArrow)
-          setBackground(element, stripe1)
-          setBackground(element, stripe2)
-          // 设置边框
-          if (element.borderWidth > 0) {
-            ;[mainArrow, stripe1, stripe2].forEach((path) => {
-              path.setAttribute("stroke", element.borderColor || "#000")
-              path.setAttribute("stroke-width", element.borderWidth || 1)
-              path.setAttribute("stroke-linecap", "butt")
-              path.setAttribute("stroke-linejoin", "round")
-
-              // 处理虚线边框
-              if (
-                element.borderType === "dotted" ||
-                element.borderType === "dashed"
-              ) {
-                if (element.borderStrokeDasharray) {
-                  path.setAttribute(
-                    "stroke-dasharray",
-                    element.borderStrokeDasharray
-                  )
-                } else if (element.borderType === "dotted") {
-                  path.setAttribute("stroke-dasharray", "1, 3")
-                } else if (element.borderType === "dashed") {
-                  path.setAttribute("stroke-dasharray", "5, 5")
-                }
-              }
-            })
-          }
-
-          stripedRightArrow.appendChild(mainArrow)
-          stripedRightArrow.appendChild(stripe1)
-          stripedRightArrow.appendChild(stripe2)
-          svg.appendChild(stripedRightArrow)
-          break
-        case "rightArrowCallout":
-          const rightArrowCallout = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          rightArrowCallout.setAttribute(
-            "d",
-            `M0,0
-            L${element.width * 0.44},0
-            L${element.width * 0.44},${element.height * 0.375}
-            L${element.width * 0.79},${element.height * 0.375}
-            L${element.width * 0.79},${element.height * 0.25}
-            L${element.width},${element.height * 0.5}
-            L${element.width * 0.79},${element.height * 0.75}
-            L${element.width * 0.79},${element.height * 0.625}
-            L${element.width * 0.44},${element.height * 0.625}
-            L${element.width * 0.44},${element.height}
-            L0,${element.height}
-            Z`
-          )
-
-          // 设置填充色
-          setBackground(element, rightArrowCallout)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            rightArrowCallout.setAttribute(
-              "stroke",
-              element.borderColor || "#000"
-            )
-            rightArrowCallout.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-            rightArrowCallout.setAttribute("stroke-linecap", "butt")
-            rightArrowCallout.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                rightArrowCallout.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                rightArrowCallout.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                rightArrowCallout.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(rightArrowCallout)
-          break
-        case "leftRightArrowCallout":
-          const leftRightArrowCallout = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          leftRightArrowCallout.setAttribute(
-            "d",
-            `M0,${element.height * 0.5}
-            L${element.width * 0.139},${element.height * 0.25}
-            L${element.width * 0.139},${element.height * 0.375}
-            L${element.width * 0.364},${element.height * 0.375}
-            L${element.width * 0.364},0
-            L${element.width * 0.636},0
-            L${element.width * 0.636},${element.height * 0.375}
-            L${element.width * 0.861},${element.height * 0.375}
-            L${element.width * 0.861},${element.height * 0.25}
-            L${element.width},${element.height * 0.5}
-            L${element.width * 0.861},${element.height * 0.75}
-            L${element.width * 0.861},${element.height * 0.625}
-            L${element.width * 0.636},${element.height * 0.625}
-            L${element.width * 0.636},${element.height}
-            L${element.width * 0.364},${element.height}
-            L${element.width * 0.364},${element.height * 0.625}
-            L${element.width * 0.139},${element.height * 0.625}
-            L${element.width * 0.139},${element.height * 0.75}
-            Z`
-          )
-
-          // 设置填充色
-          setBackground(element, leftRightArrowCallout)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            leftRightArrowCallout.setAttribute(
-              "stroke",
-              element.borderColor || "#000"
-            )
-            leftRightArrowCallout.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-            leftRightArrowCallout.setAttribute("stroke-linecap", "butt")
-            leftRightArrowCallout.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                leftRightArrowCallout.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                leftRightArrowCallout.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                leftRightArrowCallout.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(leftRightArrowCallout)
-          break
-        case "quadArrowCallout":
-          const quadArrowCallout = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          quadArrowCallout.setAttribute(
-            "d",
-            `M0,${element.height * 0.5}
-            L${element.width * 0.096},${element.height * 0.315}
-            L${element.width * 0.096},${element.height * 0.407}
-            L${element.width * 0.26},${element.height * 0.407}
-            L${element.width * 0.26},${element.height * 0.259}
-            L${element.width * 0.453},${element.height * 0.259}
-            L${element.width * 0.453},${element.height * 0.185}
-            L${element.width * 0.405},${element.height * 0.185}
-            L${element.width * 0.5},0
-            L${element.width * 0.595},${element.height * 0.185}
-            L${element.width * 0.547},${element.height * 0.185}
-            L${element.width * 0.547},${element.height * 0.259}
-            L${element.width * 0.74},${element.height * 0.259}
-            L${element.width * 0.74},${element.height * 0.407}
-            L${element.width * 0.904},${element.height * 0.407}
-            L${element.width * 0.904},${element.height * 0.315}
-            L${element.width},${element.height * 0.5}
-            L${element.width * 0.904},${element.height * 0.685}
-            L${element.width * 0.904},${element.height * 0.593}
-            L${element.width * 0.74},${element.height * 0.593}
-            L${element.width * 0.74},${element.height * 0.741}
-            L${element.width * 0.547},${element.height * 0.741}
-            L${element.width * 0.547},${element.height * 0.815}
-            L${element.width * 0.595},${element.height * 0.815}
-            L${element.width * 0.5},${element.height}
-            L${element.width * 0.405},${element.height * 0.815}
-            L${element.width * 0.453},${element.height * 0.815}
-            L${element.width * 0.453},${element.height * 0.741}
-            L${element.width * 0.26},${element.height * 0.741}
-            L${element.width * 0.26},${element.height * 0.593}
-            L${element.width * 0.096},${element.height * 0.593}
-            L${element.width * 0.096},${element.height * 0.685}
-            Z`
-          )
-
-          // 设置填充色
-          setBackground(element, quadArrowCallout)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            quadArrowCallout.setAttribute(
-              "stroke",
-              element.borderColor || "#000"
-            )
-            quadArrowCallout.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-            quadArrowCallout.setAttribute("stroke-linecap", "butt")
-            quadArrowCallout.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                quadArrowCallout.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                quadArrowCallout.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                quadArrowCallout.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(quadArrowCallout)
-          break
-        case "leftArrowCallout":
-          const leftArrowCallout = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          leftArrowCallout.setAttribute(
-            "d",
-            `M0,${element.height * 0.5}
-            L${element.width * 0.183},${element.height * 0.25}
-            L${element.width * 0.183},${element.height * 0.375}
-            L${element.width * 0.35},${element.height * 0.375}
-            L${element.width * 0.35},0
-            L${element.width},0
-            L${element.width},${element.height}
-            L${element.width * 0.35},${element.height}
-            L${element.width * 0.35},${element.height * 0.625}
-            L${element.width * 0.183},${element.height * 0.625}
-            L${element.width * 0.183},${element.height * 0.75}
-            Z`
-          )
-
-          // 设置填充色
-          setBackground(element, leftArrowCallout)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            leftArrowCallout.setAttribute(
-              "stroke",
-              element.borderColor || "#000"
-            )
-            leftArrowCallout.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-            leftArrowCallout.setAttribute("stroke-linecap", "butt")
-            leftArrowCallout.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                leftArrowCallout.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                leftArrowCallout.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                leftArrowCallout.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(leftArrowCallout)
-          break
-        case "upArrowCallout":
-          const upArrowCallout = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          upArrowCallout.setAttribute(
-            "d",
-            `M0,${element.height * 0.35}
-            L${element.width * 0.41},${element.height * 0.35}
-            L${element.width * 0.41},${element.height * 0.25}
-            L${element.width * 0.32},${element.height * 0.25}
-            L${element.width * 0.5},0
-            L${element.width * 0.68},${element.height * 0.25}
-            L${element.width * 0.59},${element.height * 0.25}
-            L${element.width * 0.59},${element.height * 0.35}
-            L${element.width},${element.height * 0.35}
-            L${element.width},${element.height}
-            L0,${element.height}
-            Z`
-          )
-
-          // 设置填充色
-          setBackground(element, upArrowCallout)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            upArrowCallout.setAttribute("stroke", element.borderColor || "#000")
-            upArrowCallout.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-            upArrowCallout.setAttribute("stroke-linecap", "butt")
-            upArrowCallout.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                upArrowCallout.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                upArrowCallout.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                upArrowCallout.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(upArrowCallout)
-          break
-        case "notchedRightArrow":
-          const notchedRightArrow = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          notchedRightArrow.setAttribute(
-            "d",
-            `M0,${element.height * 0.25}
-            L${element.width * 0.83},${element.height * 0.25}
-            L${element.width * 0.83},0
-            L${element.width},${element.height * 0.5}
-            L${element.width * 0.83},${element.height}
-            L${element.width * 0.83},${element.height * 0.75}
-            L0,${element.height * 0.75}
-            L${element.width * 0.086},${element.height * 0.5}
-            Z`
-          )
-
-          // 设置填充色
-          setBackground(element, notchedRightArrow)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            notchedRightArrow.setAttribute(
-              "stroke",
-              element.borderColor || "#000"
-            )
-            notchedRightArrow.setAttribute(
-              "stroke-width",
-              element.borderWidth || 1
-            )
-            notchedRightArrow.setAttribute("stroke-linecap", "butt")
-            notchedRightArrow.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                notchedRightArrow.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                notchedRightArrow.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                notchedRightArrow.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(notchedRightArrow)
-          break
-        case "homePlate":
-          const homePlate = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          homePlate.setAttribute(
-            "d",
-            `M0,0
-            L${element.width * 0.925},0
-            L${element.width},${element.height * 0.5}
-            L${element.width * 0.925},${element.height}
-            L0,${element.height}
-            Z`
-          )
-
-          // 设置填充色
-          setBackground(element, homePlate)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            homePlate.setAttribute("stroke", element.borderColor || "#000")
-            homePlate.setAttribute("stroke-width", element.borderWidth || 1)
-            homePlate.setAttribute("stroke-linecap", "butt")
-            homePlate.setAttribute("stroke-linejoin", "round")
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                homePlate.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                homePlate.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                homePlate.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(homePlate)
-          break
-        case "rightTriangle":
-          const rightTriangle = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          rightTriangle.setAttribute(
-            "points",
-            `0,0 ${element.width},${element.height} 0,${element.height}`
-          )
-
-          // 设置填充色
-          setBackground(element, rightTriangle)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            rightTriangle.setAttribute("stroke", element.borderColor || "#000")
-            rightTriangle.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                rightTriangle.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                rightTriangle.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                rightTriangle.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(rightTriangle)
-          break
-        case "semiCircle":
-          const semiCircle = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          semiCircle.setAttribute(
-            "d",
-            `M0,${element.height} A${element.width / 2},${
-              element.height
-            } 0 0,1 ${element.width},${element.height} Z`
-          )
-
-          // 设置填充色
-          setBackground(element, semiCircle)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            semiCircle.setAttribute("stroke", element.borderColor || "#000")
-            semiCircle.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                semiCircle.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                semiCircle.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                semiCircle.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(semiCircle)
-          break
-
-        case "star":
-          const star = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          const cx = element.width / 2
-          const cy = element.height / 2
-          const outerRadius = Math.min(element.width, element.height) / 2
-          const innerRadius = outerRadius * 0.4
-          let starPoints = ""
-
-          for (let i = 0; i < 10; i++) {
-            const radius = i % 2 === 0 ? outerRadius : innerRadius
-            const angle = (Math.PI * i) / 5
-            const x = cx + radius * Math.sin(angle)
-            const y = cy - radius * Math.cos(angle)
-            starPoints += `${x},${y} `
-          }
-
-          star.setAttribute("points", starPoints.trim())
-
-          // 设置填充色
-          setBackground(element, star)
-          // 设置边框
-          if (element.borderWidth > 0) {
-            star.setAttribute("stroke", element.borderColor || "#000")
-            star.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                star.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                star.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                star.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(star)
-          break
-
-        case "cross":
-          const cross = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-          cross.setAttribute(
-            "points",
-            `${element.width * 0.35},0 ${element.width * 0.65},0 ${
-              element.width * 0.65
-            },${element.height * 0.35} ` +
-              `${element.width},${element.height * 0.35} ${element.width},${
-                element.height * 0.65
-              } ` +
-              `${element.width * 0.65},${element.height * 0.65} ${
-                element.width * 0.65
-              },${element.height} ` +
-              `${element.width * 0.35},${element.height} ${
-                element.width * 0.35
-              },${element.height * 0.65} ` +
-              `0,${element.height * 0.65} 0,${element.height * 0.35} ${
-                element.width * 0.35
-              },${element.height * 0.35}`
-          )
-
-          // 设置填充色
-          setBackground(element, cross)
-          // 设置边框
-          if (element.borderWidth > 0) {
-            cross.setAttribute("stroke", element.borderColor || "#000")
-            cross.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                cross.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                cross.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                cross.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(cross)
-          break
-
-        case "chevron":
-          const chevron = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "polygon"
-          )
-
-          chevron.setAttribute(
-            "points",
-            `${element.width * 0.5},0 ${element.width},${
-              element.height * 0.5
-            } ` +
-              `${element.width * 0.5},${element.height} ` +
-              `0,${element.height} ${element.width * 0.5},${
-                element.height * 0.5
-              } 0,0`
-          )
-
-          // 设置填充色
-          setBackground(element, chevron)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            chevron.setAttribute("stroke", element.borderColor || "#000")
-            chevron.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                chevron.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                chevron.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                chevron.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(chevron)
-          break
-
-        case "frame":
-          // 创建外框和内框
-          const outerRect = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "rect"
-          )
-          outerRect.setAttribute("x", 0)
-          outerRect.setAttribute("y", 0)
-          outerRect.setAttribute("width", element.width)
-          outerRect.setAttribute("height", element.height)
-
-          const innerRect = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "rect"
-          )
-          const frameWidth = element.width / 10
-          innerRect.setAttribute("x", frameWidth)
-          innerRect.setAttribute("y", frameWidth)
-          innerRect.setAttribute("width", element.width - frameWidth * 2)
-          innerRect.setAttribute("height", element.height - frameWidth * 2)
-
-          // 设置填充色
-          setBackground(element, outerRect)
-          innerRect.setAttribute("fill", "white") // 内框为白色
-          // 设置边框
-          if (element.borderWidth > 0) {
-            outerRect.setAttribute("stroke", element.borderColor || "#000")
-            outerRect.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                outerRect.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                outerRect.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                outerRect.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(outerRect)
-          svg.appendChild(innerRect)
-          break
-
-        case "cloud":
-          // 使用路径绘制云形
-          const cloud = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-          const w = element.width
-          const h = element.height
-
-          cloud.setAttribute(
-            "d",
-            `M${w * 0.2},${h * 0.6} ` +
-              `C${w * 0.05},${h * 0.6} ${w * 0.05},${h * 0.3} ${w * 0.2},${
-                h * 0.3
-              } ` +
-              `C${w * 0.2},${h * 0.1} ${w * 0.45},${h * 0.1} ${w * 0.5},${
-                h * 0.3
-              } ` +
-              `C${w * 0.55},${h * 0.1} ${w * 0.8},${h * 0.1} ${w * 0.8},${
-                h * 0.3
-              } ` +
-              `C${w * 0.95},${h * 0.3} ${w * 0.95},${h * 0.6} ${w * 0.8},${
-                h * 0.6
-              } ` +
-              `L${w * 0.2},${h * 0.6} Z`
-          )
-
-          // 设置填充色
-          setBackground(element, cloud)
-          // 设置边框
-          if (element.borderWidth > 0) {
-            cloud.setAttribute("stroke", element.borderColor || "#000")
-            cloud.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                cloud.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                cloud.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                cloud.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(cloud)
-          break
-        case "blockArc":
-          const blockArc = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "path"
-          )
-
-          // 计算弧形参数
-          const rx = element.width / 2
-          const ry = element.height / 2
-          const innerRatio = 0.86 // 根据示例计算的内弧半径比例
-          const innerRx = rx * innerRatio
-          const innerRy = ry * innerRatio
-
-          // 构建路径
-          const path2 = `
-            M 0,${ry} 
-            A ${rx} ${ry} 0 1 1 ${element.width} ${ry}
-            L ${element.width - (rx - innerRx)},${ry}
-            A ${innerRx} ${innerRy} 0 1 0 ${rx - innerRx},${ry}
-            Z`
-
-          blockArc.setAttribute("d", path2.trim())
-
-          // 设置填充色
-          setBackground(element, blockArc)
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            blockArc.setAttribute("stroke", element.borderColor || "#000")
-            blockArc.setAttribute("stroke-width", element.borderWidth || 1)
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                blockArc.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                blockArc.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                blockArc.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(blockArc)
-          break
-
-        case "rect":
-        default:
-          const rect = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "rect"
-          )
-          rect.setAttribute("x", 0)
-          rect.setAttribute("y", 0)
-          rect.setAttribute("width", element.width)
-          rect.setAttribute("height", element.height)
-          if (element.fill && element.fill.type) {
-            // 设置填充色
-            if (element.fill.type === "color") {
-              rect.setAttribute("fill", element.fill.value || "transparent")
-            } else if (element.fill.type === "gradient") {
-              // 渐变填充
-              const { colors, path, rot } = element.fill.value
-
-              if (colors && colors.length >= 2) {
-                const gradientType = path === "rect" ? "linear" : "radial"
-                const gradientAngle =
-                  gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
-
-                let gradientString = `${gradientType}-gradient(`
-                if (gradientType === "linear") {
-                  gradientString += `${gradientAngle}deg, `
-                }
-
-                colors.forEach((color, i) => {
-                  gradientString += `${color.color} ${color.pos}${
-                    i < colors.length - 1 ? ", " : ""
-                  }`
-                })
-                gradientString += ")"
-
-                // 创建渐变定义
-                const gradientDef = document.createElementNS(
-                  "http://www.w3.org/2000/svg",
-                  "defs"
-                )
-                const gradientEl = document.createElementNS(
-                  "http://www.w3.org/2000/svg",
-                  gradientType === "linear"
-                    ? "linearGradient"
-                    : "radialGradient"
-                )
-                const gradientId = `gradient-${Date.now()}-${Math.random()
-                  .toString(36)
-                  .substr(2, 9)}`
-                gradientEl.setAttribute("id", gradientId)
-
-                // 设置渐变属性
-                if (gradientType === "linear") {
-                  gradientEl.setAttribute(
-                    "gradientTransform",
-                    `rotate(${gradientAngle})`
-                  )
-                }
-
-                // 添加渐变色标
-                colors.forEach((color) => {
-                  const stop = document.createElementNS(
-                    "http://www.w3.org/2000/svg",
-                    "stop"
-                  )
-                  stop.setAttribute("offset", color.pos)
-                  stop.setAttribute("stop-color", color.color)
-                  gradientEl.appendChild(stop)
-                })
-
-                gradientDef.appendChild(gradientEl)
-                svg.appendChild(gradientDef)
-
-                // 应用渐变
-                rect.setAttribute("fill", `url(#${gradientId})`)
-              }
-            } else if (element.fill.type === "image") {
-              // 创建图案填充
-              const pattern = document.createElementNS(
-                "http://www.w3.org/2000/svg",
-                "pattern"
-              )
-              const patternId = `pattern-${Date.now()}-${Math.random()
-                .toString(36)
-                .substr(2, 9)}`
-              pattern.setAttribute("id", patternId)
-              pattern.setAttribute("patternUnits", "userSpaceOnUse")
-              pattern.setAttribute("width", "100%")
-              pattern.setAttribute("height", "100%")
-
-              // 创建图片元素
-              const image = document.createElementNS(
-                "http://www.w3.org/2000/svg",
-                "image"
-              )
-              image.setAttribute("width", "100%")
-              image.setAttribute("height", "100%")
-              image.setAttribute("preserveAspectRatio", "xMidYMid slice")
-              image.setAttributeNS(
-                "http://www.w3.org/1999/xlink",
-                "href",
-                element.fill.value.picBase64
-              )
-
-              pattern.appendChild(image)
-
-              // 添加pattern到defs
-              const defs = document.createElementNS(
-                "http://www.w3.org/2000/svg",
-                "defs"
-              )
-              defs.appendChild(pattern)
-              svg.appendChild(defs)
-
-              // 应用图案填充
-              rect.setAttribute("fill", `url(#${patternId})`)
-            } else {
-              rect.setAttribute("fill", "transparent")
-            }
-          } else {
-            rect.setAttribute("fill", "#ffffff00")
-          }
-
-          // 设置边框
-          if (element.borderWidth > 0) {
-            rect.setAttribute("stroke", element.borderColor || "#000")
-            rect.setAttribute("stroke-width", element.borderWidth || 1)
-
-            // 处理虚线边框
-            if (
-              element.borderType === "dotted" ||
-              element.borderType === "dashed"
-            ) {
-              if (element.borderStrokeDasharray) {
-                rect.setAttribute(
-                  "stroke-dasharray",
-                  element.borderStrokeDasharray
-                )
-              } else if (element.borderType === "dotted") {
-                rect.setAttribute("stroke-dasharray", "1, 3")
-              } else if (element.borderType === "dashed") {
-                rect.setAttribute("stroke-dasharray", "5, 5")
-              }
-            }
-          }
-
-          svg.appendChild(rect)
-          break
-      }
-
-      const transformList = []
-      let rotateDeg = element.rotate || 0
-
-      if (element.isFlipV) {
-        transformList.push(`scaleY(-1)`)
-        rotateDeg = -rotateDeg // 垂直翻转时反转旋转方向
-      }
-
-      if (element.isFlipH) {
-        transformList.push(`scaleX(-1)`)
-        rotateDeg = -rotateDeg // 水平翻转时反转旋转方向
-      }
-
-      if (element.rotate) {
-        transformList.push(`rotate(${rotateDeg}deg)`)
-      }
-
-      if (transformList.length > 0) {
-        el.style.transform = transformList.join(" ")
-        el.style.transformOrigin = "center center"
-      }
-
-      el.appendChild(svg)
-
-      // 设置形状内容
-      if (element.content) {
-        const contentContainer = document.createElement("div")
-        contentContainer.innerHTML = this.convertPtToPxInContent(
-          element.content
-        )
-        contentContainer.style.position = "absolute"
-        contentContainer.style.width = element.width + "px"
-        contentContainer.style.height = element.height + "px"
-        contentContainer.style.top = "0px"
-        contentContainer.style.left = "0px"
-        contentContainer.style.display = "flex"
-        contentContainer.style.alignItems = "center"
-        contentContainer.style.justifyContent = "center"
-        contentContainer.style.zIndex = element.order
-        contentContainer.style.pointerEvents = "none"
-        const transformList = []
-        let rotateDeg = element.rotate || 0
-
-        if (element.isFlipV) {
-          transformList.push(`scaleY(-1)`)
-          rotateDeg = -rotateDeg // 垂直翻转时反转旋转方向
-        }
-
-        if (element.isFlipH) {
-          transformList.push(`scaleX(-1)`)
-          rotateDeg = -rotateDeg // 水平翻转时反转旋转方向
-        }
-
-        if (element.rotate) {
-          transformList.push(`rotate(${rotateDeg}deg)`)
-        }
-
-        if (transformList.length > 0) {
-          contentContainer.style.transform = transformList.join(" ")
-          contentContainer.style.transformOrigin = "center center"
-        }
-        el.appendChild(contentContainer)
-      }
-      return el
-    },
-
-    // 创建表格元素
-    createTableElement(element) {
-      const el = document.createElement("div")
-      el.style.position = "absolute"
-      el.style.top = element.top + "px"
-      el.style.left = element.left + "px"
-      el.style.width = element.width + "px"
-      el.style.height = element.height + "px"
-      el.style.zIndex = element.order
-
-      // 创建表格元素
-      const table = document.createElement("table")
-      table.style.width = element.width + "px"
-      table.style.height = element.height + "px"
-      table.style.borderCollapse = "collapse"
-      table.style.tableLayout = "fixed"
-      // 设置表格边框
-      if (element.borders) {
-        if (element.borders.all) {
-          const border = element.borders.all
-          table.style.border = `${border.borderWidth || 1}px ${
-            border.borderType || "solid"
-          } ${border.borderColor || "#000"}`
-        } else {
-          // 分别设置四边边框
-          if (element.borders.top) {
-            table.style.borderTop = `${
-              element.borders.top.borderWidth || 1
-            }px ${element.borders.top.borderType || "solid"} ${
-              element.borders.top.borderColor || "#000"
-            }`
-          }
-          if (element.borders.bottom) {
-            table.style.borderBottom = `${
-              element.borders.bottom.borderWidth || 1
-            }px ${element.borders.bottom.borderType || "solid"} ${
-              element.borders.bottom.borderColor || "#000"
-            }`
-          }
-          if (element.borders.left) {
-            table.style.borderLeft = `${
-              element.borders.left.borderWidth || 1
-            }px ${element.borders.left.borderType || "solid"} ${
-              element.borders.left.borderColor || "#000"
-            }`
-          }
-          if (element.borders.right) {
-            table.style.borderRight = `${
-              element.borders.right.borderWidth || 1
-            }px ${element.borders.right.borderType || "solid"} ${
-              element.borders.right.borderColor || "#000"
-            }`
-          }
-        }
-      }
-
-      // 创建表格内容
-      const tbody = document.createElement("tbody")
-
-      // 处理表格数据
-      if (element.data && element.data.length > 0) {
-        element.data.forEach((rowData, rowIndex) => {
-          const tr = document.createElement("tr")
-
-          rowData.forEach((cell, colIndex) => {
-            // 跳过被合并的单元格
-            if (cell.hMerge) return
-
-            const td = document.createElement("td")
-
-            // 设置单元格内容
-            if (cell.text) {
-              td.innerHTML = this.convertPtToPxInContent(cell.text)
-            }
-
-            // 设置单元格样式
-            td.style.padding = "0px"
-            td.style.verticalAlign = "middle"
-
-            // 设置文本样式
-            if (cell.fontColor) td.style.color = cell.fontColor
-            if (cell.fontSize) td.style.fontSize = cell.fontSize
-            if (cell.fontFamily) td.style.fontFamily = cell.fontFamily
-            if (cell.bold) td.style.fontWeight = "bold"
-            if (cell.italic) td.style.fontStyle = "italic"
-            if (cell.underline) td.style.textDecoration = "underline"
-            if (cell.align) td.style.textAlign = cell.align
-
-            // 设置背景色
-            if (cell.fillColor) td.style.backgroundColor = cell.fillColor
-
-            // 设置单元格边框
-            if (cell.borders) {
-              if (cell.borders.all) {
-                const border = cell.borders.all
-                td.style.border = `${border.borderWidth || 1}px ${
-                  border.borderType || "solid"
-                } ${border.borderColor || "#000"}`
-              } else {
-                // 分别设置四边边框
-                if (cell.borders.top) {
-                  td.style.borderTop = `${
-                    cell.borders.top.borderWidth || 1
-                  }px ${cell.borders.top.borderType || "solid"} ${
-                    cell.borders.top.borderColor || "#000"
-                  }`
-                }
-                if (cell.borders.bottom) {
-                  td.style.borderBottom = `${
-                    cell.borders.bottom.borderWidth || 1
-                  }px ${cell.borders.bottom.borderType || "solid"} ${
-                    cell.borders.bottom.borderColor || "#000"
-                  }`
-                }
-                if (cell.borders.left) {
-                  td.style.borderLeft = `${
-                    cell.borders.left.borderWidth || 1
-                  }px ${cell.borders.left.borderType || "solid"} ${
-                    cell.borders.left.borderColor || "#000"
-                  }`
-                }
-                if (cell.borders.right) {
-                  td.style.borderRight = `${
-                    cell.borders.right.borderWidth || 1
-                  }px ${cell.borders.right.borderType || "solid"} ${
-                    cell.borders.right.borderColor || "#000"
-                  }`
-                }
-              }
-            }
-            td.style.width = element.colWidths[colIndex] + "px"
-            // 设置单元格合并
-            if (cell.colSpan && cell.colSpan > 1) {
-              td.colSpan = cell.colSpan
-              td.style.width = element.colWidths[colIndex] * cell.colSpan + "px"
-            }
-            if (cell.rowSpan && cell.rowSpan > 1) {
-              td.rowSpan = cell.rowSpan
-            }
-
-            tr.appendChild(td)
-          })
-          tr.style.height = element.rowHeights[rowIndex] + "px"
-          tbody.appendChild(tr)
-        })
-      }
-
-      table.appendChild(tbody)
-      el.appendChild(table)
-
-      return el
-    },
-    // 创建图表元素
-    createChartElement(element) {
-      // 1. 创建基础容器
-      const el = document.createElement("div")
-      el.style.position = "absolute"
-      el.style.top = element.top + "px"
-      el.style.left = element.left + "px"
-      el.style.width = element.width + "px"
-      el.style.height = element.height + "px"
-      el.style.zIndex = element.order
-      // 2. 创建SVG画布
-      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
-      svg.setAttribute("width", element.width)
-      svg.setAttribute("height", element.height)
-      svg.setAttribute("viewBox", `0 0 ${element.width} ${element.height}`)
-
-      // 3. 设置图表内边距
-      const padding = {
-        top: 60, // 为图例留出空间
-        right: 40, // 右侧边距
-        bottom: 60, // X轴标签空间
-        left: 60, // Y轴标签空间
-      }
-
-      // 4. 计算实际绘图区域
-      const chartWidth = element.width - padding.left - padding.right
-      const chartHeight = element.height - padding.top - padding.bottom
-      // 处理不同图表类型
-      switch (element.chartType) {
-        case "barChart":
-          // 绘制柱状图
-          this.drawBarChart(svg, element, {
-            padding,
-            chartWidth,
-            chartHeight,
-            barDir: element.barDir || "col",
-            grouping: element.grouping || "clustered",
-          })
-          break
-        case "pieChart":
-        case "doughnutChart":
-          this.drawDonutChart(svg, element, chartWidth, chartHeight)
-          break
-        default:
-            // 占位符
-          svg.innerHTML = `<text x="${element.width / 2}" y="${
-            element.height / 2
-          }" text-anchor="middle" fill="#999" font-size="12px">
-            暂不支持该类型图表
-          </text>`
-          console.warn("Unsupported chart type:", element.chartType)
-      }
-
-      el.appendChild(svg)
-      return el
-    },
-    drawDonutChart(svg, element, chartWidth, chartHeight) {
-      // 计算饼图中心点和半径
-      const cx = element.width / 2
-      const cy = element.height / 2
-      const radius = Math.min(chartWidth, chartHeight) / 2
-
-      // 计算所有数据总和
-      const total = element.data[0].values.reduce(
-        (sum, item) => sum + item.y,
-        0
-      )
-
-      // 创建颜色数组
-      const colors = element.colors || [
-        "#5B9BD5",
-        "#ED7D31",
-        "#A5A5A5",
-        "#FFC000",
-      ]
-
-      let startAngle = 0
-      element.data[0].values.forEach((item, index) => {
-        // 计算扇形角度
-        const angle = (item.y / total) * Math.PI * 2
-
-        // 计算扇形路径
-        const endAngle = startAngle + angle
-        const x1 = cx + radius * Math.cos(startAngle)
-        const y1 = cy + radius * Math.sin(startAngle)
-        const x2 = cx + radius * Math.cos(endAngle)
-        const y2 = cy + radius * Math.sin(endAngle)
-
-        // 创建扇形路径
-        const path = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "path"
-        )
-        const largeArcFlag = angle > Math.PI ? 1 : 0
-
-        // 根据是否为环形图决定内圆半径
-        const innerRadius =
-          element.chartType === "doughnutChart" ? radius * 0.6 : 0
-        if (element.chartType === "doughnutChart") {
-          // 环形图路径
-          const ix1 = cx + innerRadius * Math.cos(startAngle)
-          const iy1 = cy + innerRadius * Math.sin(startAngle)
-          const ix2 = cx + innerRadius * Math.cos(endAngle)
-          const iy2 = cy + innerRadius * Math.sin(endAngle)
-
-          path.setAttribute(
-            "d",
-            `
-            M ${x1} ${y1}
-            A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}
-            L ${ix2} ${iy2}
-            A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${ix1} ${iy1}
-            Z
-          `
-          )
-        } else {
-          // 饼图路径
-          path.setAttribute(
-            "d",
-            `
-            M ${cx} ${cy}
-            L ${x1} ${y1}
-            A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}
-            Z
-          `
-          )
-        }
-
-        // 设置填充色
-        path.setAttribute("fill", colors[index % colors.length])
-        path.setAttribute("stroke", "#fff")
-        path.setAttribute("stroke-width", "1")
-        svg.appendChild(path)
-
-        // 添加数值标签
-        const labelAngle = startAngle + angle / 2
-        const labelRadius = radius * 1.1
-        const labelX = cx + labelRadius * Math.cos(labelAngle)
-        const labelY = cy + labelRadius * Math.sin(labelAngle)
-
-        const label = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "text"
-        )
-        label.setAttribute("x", labelX)
-        label.setAttribute("y", labelY)
-        label.setAttribute("text-anchor", "middle")
-        label.setAttribute("alignment-baseline", "middle")
-        label.setAttribute("font-size", "12px")
-        label.textContent = `${((item.y / total) * 100).toFixed(1)}%`
-        svg.appendChild(label)
-
-        startAngle = endAngle
-      })
-    },
-    // 绘制柱状图
-    drawBarChart(svg, element, options) {
-      const { padding, chartWidth, chartHeight, barDir, grouping } = options
-      const series = element.data
-      const categories = series[0].xlabels
-      const categoryCount = Object.keys(categories).length
-
-      // 1. 计算最大值
-      let maxValue = 0
-      series.forEach((serie) => {
-        const seriesMax = Math.max(...serie.values.map((v) => v.y))
-        maxValue = Math.max(maxValue, seriesMax)
-      })
-      maxValue = maxValue * 1.2 // 增加20%空间
-
-      // 2. 计算柱子布局
-      const groupWidth = chartWidth / categoryCount
-      const barWidth =
-        grouping === "clustered"
-          ? (groupWidth * 0.6) / series.length // 分组模式
-          : groupWidth * 0.6 // 堆叠模式
-      const barSpacing =
-        (groupWidth * 0.4) / (grouping === "clustered" ? series.length + 1 : 2)
-
-      // 3. 绘制坐标轴
-      // X轴
-      const xAxisPath = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      xAxisPath.setAttribute(
-        "d",
-        `M${padding.left},${element.height - padding.bottom} L${
-          element.width - padding.right
-        },${element.height - padding.bottom}`
-      )
-      xAxisPath.setAttribute("stroke", "#000")
-      xAxisPath.setAttribute("stroke-width", "1")
-      svg.appendChild(xAxisPath)
-
-      // Y轴
-      const yAxisPath = document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path"
-      )
-      yAxisPath.setAttribute(
-        "d",
-        `M${padding.left},${padding.top} L${padding.left},${
-          element.height - padding.bottom
-        }`
-      )
-      yAxisPath.setAttribute("stroke", "#000")
-      yAxisPath.setAttribute("stroke-width", "1")
-      svg.appendChild(yAxisPath)
-
-      // 4. 绘制Y轴刻度和网格线
-      const yTickCount = 5
-      for (let i = 0; i <= yTickCount; i++) {
-        const y = padding.top + (chartHeight * i) / yTickCount
-        const value = maxValue - (maxValue * i) / yTickCount
-
-        // 水平网格线
-        const gridLine = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "line"
-        )
-        gridLine.setAttribute("x1", padding.left)
-        gridLine.setAttribute("y1", y)
-        gridLine.setAttribute("x2", padding.left + chartWidth)
-        gridLine.setAttribute("y2", y)
-        gridLine.setAttribute("stroke", "#eee")
-        gridLine.setAttribute("stroke-width", "1")
-        svg.appendChild(gridLine)
-
-        // 刻度线
-        const tick = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "line"
-        )
-        tick.setAttribute("x1", padding.left - 6)
-        tick.setAttribute("y1", y)
-        tick.setAttribute("x2", padding.left)
-        tick.setAttribute("y2", y)
-        tick.setAttribute("stroke", "#000")
-        tick.setAttribute("stroke-width", "1")
-        svg.appendChild(tick)
-
-        // 刻度值
-        const label = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "text"
-        )
-        label.setAttribute("x", padding.left - 10)
-        label.setAttribute("y", y + 4)
-        label.setAttribute("text-anchor", "end")
-        label.setAttribute("font-size", "12px")
-        label.textContent = value.toFixed(1)
-        svg.appendChild(label)
-      }
-
-      // 5. 绘制数据条
-      series.forEach((serie, serieIndex) => {
-        serie.values.forEach((value, index) => {
-          const barHeight = (value.y / maxValue) * chartHeight
-          const x =
-            padding.left +
-            groupWidth * index +
-            (grouping === "clustered"
-              ? barSpacing * (serieIndex + 1) + barWidth * serieIndex
-              : barSpacing)
-          const y = element.height - padding.bottom - barHeight
-
-          // 绘制柱子
-          const bar = document.createElementNS(
-            "http://www.w3.org/2000/svg",
-            "rect"
-          )
-          bar.setAttribute("x", x)
-          bar.setAttribute("y", y)
-          bar.setAttribute("width", barWidth)
-          bar.setAttribute("height", barHeight)
-          bar.setAttribute(
-            "fill",
-            element.colors[serieIndex] || `hsl(${serieIndex * 60}, 70%, 50%)`
-          )
-          svg.appendChild(bar)
-
-          // 数值标签
-          if (element.marker) {
-            const label = document.createElementNS(
-              "http://www.w3.org/2000/svg",
-              "text"
-            )
-            label.setAttribute("x", x + barWidth / 2)
-            label.setAttribute("y", y - 5)
-            label.setAttribute("text-anchor", "middle")
-            label.setAttribute("font-size", "12px")
-            label.textContent = value.y.toFixed(1)
-            svg.appendChild(label)
-          }
-        })
-      })
-
-      // 6. 绘制X轴类别标签
-      Object.values(categories).forEach((label, index) => {
-        const x = padding.left + groupWidth * (index + 0.5)
-        const text = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "text"
-        )
-        text.setAttribute("x", x)
-        text.setAttribute("y", element.height - padding.bottom + 20)
-        text.setAttribute("text-anchor", "middle")
-        text.setAttribute("font-size", "12px")
-        text.textContent = label
-        svg.appendChild(text)
-      })
-
-      // 7. 绘制图例
-      series.forEach((serie, index) => {
-        const legendX = padding.left + index * 120
-        const legendY = 20
-
-        const rect = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "rect"
-        )
-        rect.setAttribute("x", legendX)
-        rect.setAttribute("y", legendY)
-        rect.setAttribute("width", 15)
-        rect.setAttribute("height", 15)
-        rect.setAttribute(
-          "fill",
-          element.colors[index] || `hsl(${index * 60}, 70%, 50%)`
-        )
-        svg.appendChild(rect)
-
-        const text = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "text"
-        )
-        text.setAttribute("x", legendX + 25)
-        text.setAttribute("y", legendY + 12)
-        text.setAttribute("font-size", "12px")
-        text.textContent = serie.key
-        svg.appendChild(text)
-      })
-    },
-    // 绘制网格和刻度
-    drawGrid(svg, padding, width, height, maxValue) {
-      const yTickCount = 5
-      for (let i = 0; i <= yTickCount; i++) {
-        const y = padding.top + (height * i) / yTickCount
-        const value = maxValue - (maxValue * i) / yTickCount
-
-        // 刻度线
-        const tick = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "line"
-        )
-        tick.setAttribute("x1", padding.left - 5)
-        tick.setAttribute("x2", padding.left)
-        tick.setAttribute("y1", y)
-        tick.setAttribute("y2", y)
-        tick.setAttribute("stroke", "#000")
-        svg.appendChild(tick)
-
-        // 刻度值
-        const label = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "text"
-        )
-        label.setAttribute("x", padding.left - 8)
-        label.setAttribute("y", y + 4)
-        label.setAttribute("text-anchor", "end")
-        label.setAttribute("font-size", "12px")
-        label.textContent = value.toFixed(1)
-        svg.appendChild(label)
-      }
-    },
-    // 绘制类别标签
-    drawCategoryLabels(svg, categories, padding, groupWidth, barDir) {
-      Object.values(categories).forEach((label, index) => {
-        const text = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "text"
-        )
-        if (barDir === "col") {
-          text.setAttribute("x", padding.left + groupWidth * (index + 0.5))
-          text.setAttribute("y", svg.height.baseVal.value - padding.bottom + 20)
-          text.setAttribute("text-anchor", "middle")
-        } else {
-          text.setAttribute("x", padding.left - 10)
-          text.setAttribute("y", padding.top + groupWidth * (index + 0.5))
-          text.setAttribute("text-anchor", "end")
-          text.setAttribute("dominant-baseline", "middle")
-        }
-        text.setAttribute("font-size", "12px")
-        text.textContent = label
-        svg.appendChild(text)
-      })
-    },
-    // 绘制图例
-    drawLegend(svg, series, colors, padding) {
-      series.forEach((serie, index) => {
-        const legendX = padding.left + index * 100
-        const legendY = 20
-
-        const rect = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "rect"
-        )
-        rect.setAttribute("x", legendX)
-        rect.setAttribute("y", legendY)
-        rect.setAttribute("width", 15)
-        rect.setAttribute("height", 15)
-        rect.setAttribute(
-          "fill",
-          colors[index] || `hsl(${index * 60}, 70%, 50%)`
-        )
-        svg.appendChild(rect)
-
-        const text = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "text"
-        )
-        text.setAttribute("x", legendX + 20)
-        text.setAttribute("y", legendY + 12)
-        text.setAttribute("font-size", "12px")
-        text.textContent = serie.key
-        svg.appendChild(text)
-      })
-    },
-    // 创建SmartArt图表元素
-    createDiagramElement(element) {
-      const el = document.createElement("div")
-      el.style.position = "absolute"
-      el.style.top = element.top + "px"
-      el.style.left = element.left + "px"
-      el.style.width = element.width + "px"
-      el.style.height = element.height + "px"
-      el.style.zIndex = element.order
-      // 递归渲染SmartArt节点
-      const renderDiagramNode = (node) => {
-        const nodeEl = document.createElement("div")
-        nodeEl.style.position = "absolute"
-        nodeEl.style.left = node.left + "px"
-        nodeEl.style.top = node.top + "px"
-        nodeEl.style.width = node.width + "px"
-        nodeEl.style.height = node.height + "px"
-
-        // 设置边框
-        if (node.borderWidth > 0) {
-          nodeEl.style.border = `${node.borderWidth}px ${node.borderType} ${node.borderColor}`
-          if (
-            node.borderStrokeDasharray &&
-            node.borderStrokeDasharray !== "0"
-          ) {
-            nodeEl.style.borderStyle = "dashed"
-          }
-        }
-
-        // 设置背景填充
-        if (node.fill && node.fill.type === "color") {
-          nodeEl.style.backgroundColor = node.fill.value
-        }
-
-        // 设置内容
-        if (node.content) {
-          nodeEl.innerHTML = this.convertPtToPxInContent(node.content)
-        }
-
-        // 设置垂直对齐
-        if (node.vAlign === "mid") {
-          nodeEl.style.display = "flex"
-          nodeEl.style.alignItems = "center"
-          nodeEl.style.justifyContent = "center"
-        }
-
-        // 设置翻转
-        const transforms = []
-        if (node.isFlipV) {
-          transforms.push("scaleY(-1)")
-        }
-        if (node.isFlipH) {
-          transforms.push("scaleX(-1)")
-        }
-        if (transforms.length > 0) {
-          nodeEl.style.transform = transforms.join(" ")
-        }
-
-        return nodeEl
-      }
-
-      // 按照 order 排序元素
-      const sortedElements = [...element.elements].sort(
-        (a, b) => a.order - b.order
-      )
-
-      // 渲染所有节点
-      sortedElements.forEach((node) => {
-        const nodeEl = renderDiagramNode(node)
-        el.appendChild(nodeEl)
-      })
-
-      return el
-    },
-    // 创建数学公式元素
-    createMathElement(element) {
-      const el = document.createElement("div")
-      el.style.position = "absolute"
-      el.style.top = element.top + "px"
-      el.style.left = element.left + "px"
-      el.style.width = element.width + "px"
-      el.style.height = element.height + "px"
-
-      // 如果有公式图片，优先使用图片显示
-      if (element.picBase64) {
-        const img = document.createElement("img")
-        img.src = element.picBase64
-        img.style.width = "100%"
-        img.style.height = "100%"
-        img.style.objectFit = "contain"
-        el.appendChild(img)
-        return el
-      }
-
-      // 如果有 LaTeX 表达式，使用 MathJax 渲染
-      if (element.latex) {
-        // 创建公式容器
-        const mathContainer = document.createElement("div")
-        mathContainer.style.width = "100%"
-        mathContainer.style.height = "100%"
-        mathContainer.style.display = "flex"
-        mathContainer.style.alignItems = "center"
-        mathContainer.style.justifyContent = "center"
-
-        // 添加 LaTeX 公式
-        mathContainer.innerHTML = `\\[${element.latex}\\]`
-
-        // 如果 MathJax 不可用，显示原始 LaTeX
-        mathContainer.style.fontFamily = "monospace"
-        mathContainer.style.whiteSpace = "pre-wrap"
-        mathContainer.style.padding = "10px"
-        mathContainer.textContent = element.latex
-
-        el.appendChild(mathContainer)
-      }
-
-      return el
-    },
-    // 创建文本元素
-    createTextElement(element) {
-      const el = document.createElement("div")
-      if (element.content) {
-        // 转换内容中的pt单位为px单位
-        const convertedContent = this.convertPtToPxInContent(element.content)
-        el.innerHTML = convertedContent
-
-        // 设置文本样式
-        el.style.width = element.width + "px"
-        el.style.height = element.height + "px"
-        el.style.color = element.fontColor || "#000"
-        el.style.fontSize = element.fontSize
-        el.style.fontFamily = element.fontFamily || "Arial"
-        el.style.textAlign = element.align || "left"
-        el.style.fontWeight = element.bold ? "bold" : "normal"
-        el.style.fontStyle = element.italic ? "italic" : "normal"
-        el.style.textDecoration = element.underline ? "underline" : "none"
-        el.style.position = "absolute"
-        el.style.top = element.top + "px" || "0"
-        el.style.left = element.left + "px" || "0"
-        el.style.zIndex = element.order
-        el.style.whiteSpace = "pre-wrap"
-
-        // 添加垂直对齐支持
-        el.style.display = "flex"
-        el.style.flexDirection = "column"
-        switch (element.vAlign) {
-          case "up":
-            el.style.justifyContent = "flex-start"
-            break
-          case "mid":
-            el.style.justifyContent = "center"
-            break
-          case "down":
-            el.style.justifyContent = "flex-end"
-            break
-          default:
-            el.style.justifyContent = "flex-start"
-        }
-
-        // 设置段落间距
-        el.style.lineHeight = element.lineHeight + "px" || "1.2"
-        el.style.letterSpacing = element.charSpacing
-          ? `${element.charSpacing}px`
-          : "normal"
-      }
-      return el
-    },
-    // 调整颜色明暗度
-    adjustBrightness(color, factor) {
-      if (color === "transparent") return color
-      const hex = color.replace("#", "")
-      const r = Math.min(
-        255,
-        Math.round(parseInt(hex.substr(0, 2), 16) * factor)
-      )
-      const g = Math.min(
-        255,
-        Math.round(parseInt(hex.substr(2, 2), 16) * factor)
-      )
-      const b = Math.min(
-        255,
-        Math.round(parseInt(hex.substr(4, 2), 16) * factor)
-      )
-      return `#${r.toString(16).padStart(2, "0")}${g
-        .toString(16)
-        .padStart(2, "0")}${b.toString(16).padStart(2, "0")}`
-    },
-    convertPtToPxInContent(content) {
-      if (!content) return content
-      // 使用正则表达式查找并替换
-      return content.replace(/(\d+\.?\d*)(pt|PT)/g, (match, size) => {
-        // 将 pt 转换为 px（1pt ≈ 1.33333px）
-        const pxSize = size
-        return `${pxSize}px`
-      })
-    },
-    processElements(elements, slideIndex) {
-      if (!elements || !Array.isArray(elements)) return
-
-      // 使用 Map 存储原始顺序，避免多次排序
-      const orderMap = new Map(
-        elements.map((el, index) => [el, el.order || index])
-      )
-
-      // 一次性排序
-      elements.sort((a, b) => orderMap.get(a) - orderMap.get(b))
-
-      const processElement = (element, baseOrder) => {
-        // 设置当前元素的 order
-        element.order = baseOrder
-
-        // 如果有子元素，递归处理
-        if (element.elements?.length > 0) {
-          element.elements
-            .sort((a, b) => (a.order || 0) - (b.order || 0))
-            .forEach((child, idx) => {
-              processElement(child, baseOrder * 10 + idx + 1)
-            })
-        }
-      }
-
-      // 处理每个顶层元素
-      elements.forEach((element, index) => {
-        processElement(element, (slideIndex + 1) * 10 + index + 1)
-      })
-    },
-  },
-}
-</script>
-<style scoped lang="less">
-.pptx-container {
-  width: 100%;
-  height: 100%;
-  z-index: 99;
-}
-</style>

src/views/index.vue

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2025-04-24 15:23:24
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-25 09:29:37
+ * @LastEditTime: 2025-04-25 09:48:50
  * @Description: 
 -->
 <template>
@@ -56,13 +56,13 @@ import { ref, reactive, onMounted } from "vue"
 import ViewFile from "@/components/view_file/index.vue"
 
 type file = {
-  filename: string
+  filename: string 
   type: string
   fileBuffer: ArrayBuffer | null
 }
 // 文件数据对象
 const fileData = ref<file>({
-  filename: "",
+  filename: "", //文件名
   type: "", // 文件类型，可以是 pdf, docx, xlsx, pptx, image, text 等
   fileBuffer: null, // 文件缓冲区，实际使用时需要从后端获取或本地读取
 })